/* Celenode Divi Buttons – frontend + kartotek-preview.
   Variabler: --b hovedfarve · --t tekstfarve · --a accentfarve · --fs størrelse · --r radius · --py/--px padding
   --fw vægt · --ff font · --ls bogstavafstand · --tt transform · --dur tempo · --bw kantbredde · --g afstand */

@property --cdb-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- Wrapper / layout ---------- */
.cdb { display: flex; flex-wrap: wrap; gap: var(--g, 16px); align-items: center; justify-content: flex-start; box-sizing: border-box; }
.cdb.cdb-center { justify-content: center; }
.cdb.cdb-right { justify-content: flex-end; }
.cdb.cdb-stack { flex-direction: column; align-items: flex-start; }
.cdb.cdb-stack.cdb-center { align-items: center; }
.cdb.cdb-stack.cdb-right { align-items: flex-end; }
.cdb.cdb-row.cdb-full .cdb-btn { flex: 1 1 0; }
.cdb.cdb-stack.cdb-full { align-items: stretch; }
@media (max-width: 600px) {
	.cdb.cdb-m-stack { flex-direction: column; align-items: flex-start; }
	.cdb.cdb-m-stack.cdb-center { align-items: center; }
	.cdb.cdb-m-stack.cdb-right { align-items: flex-end; }
	.cdb.cdb-m-stack.cdb-full { align-items: stretch; }
	.cdb.cdb-m-stack.cdb-full .cdb-btn { flex: 0 0 auto; }

	/* Bredde på mobil (indstillingen "Bredde på mobil"). Dobbelt klasse = vinder over "Fuld bredde" til computer. */
	.cdb.cdb-mw-small .cdb-btn.cdb-btn { flex: 0 0 auto; width: auto; max-width: 100%; }
	.cdb.cdb-mw-full .cdb-btn.cdb-btn { flex: 1 1 100%; width: 100%; max-width: 100%; }
	.cdb.cdb-mw-custom .cdb-btn.cdb-btn { flex: 0 0 auto; width: var(--mw, 80%); max-width: 100%; }
	/* Knapper under hinanden: lille/tilpasset følger justeringen, fuld bredde fylder hele rækken */
	.cdb.cdb-mw-full:is(.cdb-stack, .cdb-m-stack) { align-items: stretch; }
	.cdb.cdb-mw-small:is(.cdb-stack, .cdb-m-stack), .cdb.cdb-mw-custom:is(.cdb-stack, .cdb-m-stack) { align-items: flex-start; }
	.cdb.cdb-mw-small.cdb-center:is(.cdb-stack, .cdb-m-stack), .cdb.cdb-mw-custom.cdb-center:is(.cdb-stack, .cdb-m-stack) { align-items: center; }
	.cdb.cdb-mw-small.cdb-right:is(.cdb-stack, .cdb-m-stack), .cdb.cdb-mw-custom.cdb-right:is(.cdb-stack, .cdb-m-stack) { align-items: flex-end; }
}

/* Ingen ydre afstand omkring knapperne. Divi lægger som standard luft under moduler; den fjernes her
   (en afstand du selv sætter i Divis Spacing-felt vinder stadig). */
.cdb:not(.cdb-equal), .cdb .cdb-btn { margin: 0 !important; }

/* Lige store knapper: begge får bredden på den bredeste og højden på den højeste.
   Gitteret er kun så bredt som indholdet (fit-content); justeringen sker med auto-margin. */
.cdb.cdb-equal { display: grid; width: fit-content; max-width: 100%; align-items: stretch; justify-content: stretch; gap: var(--g, 16px); }
.cdb.cdb-equal.cdb-row { grid-auto-flow: column; grid-auto-columns: 1fr; }
.cdb.cdb-equal.cdb-stack { grid-auto-flow: row; grid-auto-columns: 1fr; }
.cdb.cdb-equal.cdb-left { margin: 0 auto 0 0 !important; }
.cdb.cdb-equal.cdb-center { margin: 0 auto !important; }
.cdb.cdb-equal.cdb-right { margin: 0 0 0 auto !important; }
.cdb.cdb-equal.cdb-full { width: 100%; }
.cdb.cdb-equal .cdb-btn { width: 100%; }
@media (max-width: 600px) {
	.cdb.cdb-equal.cdb-m-stack { grid-auto-flow: row; }
	.cdb.cdb-equal.cdb-mw-full { width: 100%; }
	.cdb.cdb-equal.cdb-mw-custom { width: var(--mw, 80%); }
	.cdb.cdb-equal.cdb-mw-small .cdb-btn.cdb-btn, .cdb.cdb-equal.cdb-mw-custom .cdb-btn.cdb-btn, .cdb.cdb-equal.cdb-mw-full .cdb-btn.cdb-btn { width: 100%; }
}
.et_pb_module.cdb_buttons, .et_pb_column .et_pb_module.cdb_buttons, .et_pb_cdb_buttons { margin-bottom: 0; }

/* ---------- Basis ---------- */
.cdb .cdb-btn {
	--b: #4f5df5; --t: #ffffff; --a: #ff7ab6;
	--dk: color-mix(in srgb, var(--b) 62%, #000);
	--lt: color-mix(in srgb, var(--b) 18%, #fff);
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
	box-sizing: border-box; margin: 0;
	padding: var(--py, 14px) var(--px, 28px);
	font-family: var(--ff, inherit); font-size: var(--fs, 16px); font-weight: var(--fw, 600);
	letter-spacing: var(--ls, 0); text-transform: var(--tt, none); line-height: 1.2; text-align: center;
	text-decoration: none !important; cursor: pointer;
	color: var(--t) !important; background: var(--b);
	border: var(--bw, 2px) solid transparent; border-radius: var(--r, 8px);
	isolation: isolate; -webkit-tap-highlight-color: transparent;
	transition: background-color var(--dur, .3s) ease, color var(--dur, .3s) ease, border-color var(--dur, .3s) ease,
		box-shadow var(--dur, .3s) ease, transform var(--dur, .3s) ease, filter var(--dur, .3s) ease,
		background-position var(--dur, .3s) ease, outline-offset var(--dur, .3s) ease, text-shadow var(--dur, .3s) ease;
}
.cdb .cdb-btn:active { transform: translateY(1px) scale(.985); }
.cdb .cdb-btn:focus-visible { outline: 3px solid var(--a); outline-offset: 3px; }
.cdb .cdb-l { display: inline-block; }
.cdb .cdb-lt { display: inline-block; }
.cdb .cdb-ic { display: inline-flex; flex: none; transition: transform var(--dur, .3s) ease, opacity var(--dur, .3s) ease, width var(--dur, .3s) ease, margin var(--dur, .3s) ease; }
.cdb .cdb-ic svg { width: 1.15em; height: 1.15em; fill: none; stroke: var(--ic, currentColor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cdb .cdb-btn:hover .cdb-ic.is-move { transform: translateX(.25em); }

/* ===================== SIMPLE ===================== */
.cdb .s-solid:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px var(--b); filter: brightness(1.08); }

.cdb .s-pill { border-radius: 999px; }
.cdb .s-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px var(--b); }

.cdb .s-square { border-radius: 0; }
.cdb .s-square:hover { background: var(--dk); }

.cdb .s-outline, .cdb .s-outline-pill { background: transparent; color: var(--b) !important; border-color: var(--b); }
.cdb .s-outline:hover, .cdb .s-outline-pill:hover { background: var(--b); color: var(--t) !important; }
.cdb .s-outline-pill { border-radius: 999px; }

.cdb .s-ghost { background: transparent; color: var(--b) !important; }
.cdb .s-ghost:hover { background: color-mix(in srgb, var(--b) 14%, transparent); }

.cdb .s-soft { background: color-mix(in srgb, var(--b) 14%, transparent); color: var(--b) !important; }
.cdb .s-soft:hover { background: var(--b); color: var(--t) !important; }

.cdb .s-underline, .cdb .s-link-arrow { background: transparent; color: var(--b) !important; border: 0; border-radius: 0; padding-left: 0; padding-right: 0; padding-bottom: calc(var(--py, 14px) * .5); }
.cdb .s-underline::after, .cdb .s-link-arrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: var(--bw, 2px); background: currentColor; transform: scaleX(.3); transform-origin: left; transition: transform .4s ease; }
.cdb .s-underline:hover::after, .cdb .s-link-arrow:hover::after { transform: scaleX(1); }

/* ===================== FYLD-ANIMATIONER ===================== */
.cdb .s-fill-left, .cdb .s-fill-right, .cdb .s-fill-up, .cdb .s-fill-down, .cdb .s-fill-center,
.cdb .s-fill-diagonal, .cdb .s-fill-circle, .cdb .s-fill-split {
	background: transparent; color: var(--b) !important; border-color: var(--b); overflow: hidden;
}
.cdb .s-fill-left:hover, .cdb .s-fill-right:hover, .cdb .s-fill-up:hover, .cdb .s-fill-down:hover, .cdb .s-fill-center:hover,
.cdb .s-fill-diagonal:hover, .cdb .s-fill-circle:hover, .cdb .s-fill-split:hover { color: var(--t) !important; }
.cdb .s-fill-left::before, .cdb .s-fill-right::before, .cdb .s-fill-up::before, .cdb .s-fill-down::before, .cdb .s-fill-center::before,
.cdb .s-fill-diagonal::before, .cdb .s-fill-circle::before, .cdb .s-fill-split::before, .cdb .s-fill-split::after {
	content: ""; position: absolute; inset: 0; background: var(--b); z-index: -1; pointer-events: none;
	transition: transform var(--dur, .3s) ease;
}
.cdb .s-fill-left::before { transform: translateX(-101%); }
.cdb .s-fill-right::before { transform: translateX(101%); }
.cdb .s-fill-up::before { transform: translateY(101%); }
.cdb .s-fill-down::before { transform: translateY(-101%); }
.cdb .s-fill-center::before { transform: scaleX(0); }
.cdb .s-fill-left:hover::before, .cdb .s-fill-right:hover::before, .cdb .s-fill-up:hover::before,
.cdb .s-fill-down:hover::before, .cdb .s-fill-center:hover::before { transform: none; }
.cdb .s-fill-diagonal::before { inset: 0 -25%; transform: translateX(-110%) skewX(-25deg); }
.cdb .s-fill-diagonal:hover::before { transform: translateX(0) skewX(-25deg); }
.cdb .s-fill-circle::before { inset: auto; left: 50%; top: 50%; width: 200%; height: auto; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); }
.cdb .s-fill-circle:hover::before { transform: translate(-50%, -50%) scale(1); }
.cdb .s-fill-split::before { inset: 0 50% 0 0; transform: scaleX(0); transform-origin: left; }
.cdb .s-fill-split::after { inset: 0 0 0 50%; transform: scaleX(0); transform-origin: right; }
.cdb .s-fill-split:hover::before, .cdb .s-fill-split:hover::after { transform: scaleX(1); }

/* ===================== GRADIENT ===================== */
.cdb .s-gradient, .cdb .s-gradient-pill {
	background: linear-gradient(135deg, var(--b), var(--a)); background-size: 200% 200%; background-position: 0 0;
}
.cdb .s-gradient:hover, .cdb .s-gradient-pill:hover { background-position: 100% 100%; transform: translateY(-2px); box-shadow: 0 10px 24px -8px var(--a); }
.cdb .s-gradient-pill { border-radius: 999px; }

.cdb .s-gradient-outline { background: transparent; color: var(--b) !important; border-color: transparent; }
.cdb .s-gradient-outline::before {
	content: ""; position: absolute; inset: calc(var(--bw, 2px) * -1); border-radius: inherit; padding: var(--bw, 2px);
	background: linear-gradient(135deg, var(--b), var(--a)); pointer-events: none;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.cdb .s-gradient-outline::after {
	content: ""; position: absolute; inset: calc(var(--bw, 2px) * -1); border-radius: inherit; z-index: -1; opacity: 0; pointer-events: none;
	background: linear-gradient(135deg, var(--b), var(--a)); transition: opacity var(--dur, .3s) ease;
}
.cdb .s-gradient-outline:hover { color: var(--t) !important; }
.cdb .s-gradient-outline:hover::after { opacity: 1; }

.cdb .s-gradient-flow { background: linear-gradient(120deg, var(--b), var(--a), var(--b)); background-size: 300% 100%; animation: cdb-flow 5s ease-in-out infinite; }
.cdb .s-gradient-flow:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px var(--a); }

.cdb .s-gradient-shine, .cdb .s-shine { overflow: hidden; }
.cdb .s-gradient-shine { background: linear-gradient(135deg, var(--b), var(--a)); }
.cdb .s-gradient-shine::after, .cdb .s-shine::after {
	content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; pointer-events: none;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); transition: left .7s ease;
}
.cdb .s-gradient-shine:hover::after, .cdb .s-shine:hover::after { left: 130%; }

.cdb .s-aurora {
	background: radial-gradient(at 20% 20%, var(--a), transparent 55%), radial-gradient(at 85% 80%, color-mix(in srgb, var(--a) 50%, var(--b)), transparent 55%), var(--b);
	background-size: 170% 170%; animation: cdb-aurora 6s ease-in-out infinite alternate;
}
.cdb .s-aurora:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px var(--a); }

/* ===================== GLOW / NEON ===================== */
.cdb .s-glow { box-shadow: 0 0 18px -2px var(--b); }
.cdb .s-glow:hover { box-shadow: 0 0 34px 2px var(--b); transform: translateY(-2px); }

.cdb .s-neon, .cdb .s-neon-pulse {
	background: #0b0b14; color: var(--b) !important; border-color: var(--b); text-shadow: 0 0 8px var(--b);
	box-shadow: 0 0 10px var(--b), inset 0 0 10px color-mix(in srgb, var(--b) 40%, transparent);
}
.cdb .s-neon:hover, .cdb .s-neon-pulse:hover { background: var(--b); color: var(--t) !important; text-shadow: none; box-shadow: 0 0 28px var(--b), 0 0 60px var(--b); }
.cdb .s-neon-pulse { animation: cdb-neon 1.8s ease-in-out infinite alternate; }

.cdb .s-glow-under { background: transparent; border-color: transparent; }
.cdb .s-glow-under::after { content: ""; position: absolute; inset: calc(var(--bw, 2px) * -1); border-radius: inherit; background: linear-gradient(90deg, var(--b), var(--a)); z-index: -1; pointer-events: none; }
.cdb .s-glow-under::before { content: ""; position: absolute; inset: 8px 6%; border-radius: inherit; background: linear-gradient(90deg, var(--b), var(--a)); filter: blur(16px); opacity: .65; z-index: -2; pointer-events: none; transition: all var(--dur, .3s) ease; }
.cdb .s-glow-under:hover::before { inset: 0; opacity: 1; filter: blur(22px); }

.cdb .s-rainbow-border { background: transparent; border-color: transparent; }
.cdb .s-rainbow-border::before {
	content: ""; position: absolute; inset: calc(var(--bw, 2px) * -1); border-radius: inherit; z-index: -2; pointer-events: none;
	background: conic-gradient(from var(--cdb-ang), #ff3d81, #ffb800, #3dffb0, #3d8bff, #c13dff, #ff3d81); animation: cdb-spin 3s linear infinite;
}
.cdb .s-rainbow-border::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #0f0f1a; z-index: -1; pointer-events: none; }

/* ===================== 3D / RETRO ===================== */
.cdb .s-press-3d { box-shadow: 0 6px 0 var(--dk); }
.cdb .s-press-3d:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--dk); }
.cdb .s-press-3d:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--dk); }

.cdb .s-neo-brutal { border: 3px solid #111; border-radius: 0; box-shadow: 5px 5px 0 #111; }
.cdb .s-neo-brutal:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 #111; }
.cdb .s-neo-brutal:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #111; }

.cdb .s-retro-offset { border-radius: 4px; box-shadow: 6px 6px 0 var(--a); }
.cdb .s-retro-offset:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--a); }

.cdb .s-pixel {
	border: 0; border-radius: 0; font-family: "Courier New", monospace; text-transform: uppercase; letter-spacing: .06em;
	box-shadow: -4px 0 0 0 var(--dk), 4px 0 0 0 var(--dk), 0 -4px 0 0 var(--dk), 0 4px 0 0 var(--dk);
}
.cdb .s-pixel:hover { background: var(--a); transform: translateY(-2px); }

.cdb .s-gel {
	background: linear-gradient(var(--lt), var(--b) 50%, var(--dk)); border-color: var(--dk);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 8px rgba(0, 0, 0, .25); text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.cdb .s-gel:hover { filter: brightness(1.1); transform: translateY(-1px); }

.cdb .s-layered { box-shadow: 4px 4px 0 var(--a), 8px 8px 0 color-mix(in srgb, var(--a) 45%, transparent); }
.cdb .s-layered:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--a), 4px 4px 0 color-mix(in srgb, var(--a) 45%, transparent); }

.cdb .s-dashed { background: transparent; color: var(--b) !important; border: var(--bw, 2px) dashed var(--b); }
.cdb .s-dashed:hover { background: var(--b); color: var(--t) !important; border-style: solid; }

/* ===================== GLAS / BLØD ===================== */
.cdb .s-glass {
	background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .38);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, .15);
}
.cdb .s-glass:hover { background: rgba(255, 255, 255, .28); transform: translateY(-2px); }

.cdb .s-frosted {
	background: color-mix(in srgb, var(--b) 40%, transparent); border: 1px solid color-mix(in srgb, var(--b) 60%, #fff);
	-webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.cdb .s-frosted:hover { background: color-mix(in srgb, var(--b) 65%, transparent); transform: translateY(-2px); }

.cdb .s-soft-shadow { box-shadow: 0 14px 30px -10px var(--b); }
.cdb .s-soft-shadow:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -12px var(--b); }

.cdb .s-neumorph { background: #e6e9ef; color: var(--b) !important; border-color: transparent; box-shadow: 6px 6px 14px #c5c8ce, -6px -6px 14px #ffffff; }
.cdb .s-neumorph:hover { box-shadow: 3px 3px 8px #c5c8ce, -3px -3px 8px #ffffff; }
.cdb .s-neumorph:active { box-shadow: inset 4px 4px 8px #c5c8ce, inset -4px -4px 8px #ffffff; }

/* ===================== FORMER ===================== */
.cdb .s-cut-corner { border: 0; border-radius: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.cdb .s-cut-corner:hover { background: var(--a); }

.cdb .s-arrow-shape { border: 0; border-radius: 0; padding-right: calc(var(--px, 28px) + 14px); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
.cdb .s-arrow-shape:hover { background: var(--a); }

.cdb .s-skew { border-radius: 0; transform: skewX(-12deg); }
.cdb .s-skew > * { transform: skewX(12deg); }
.cdb .s-skew:hover { background: var(--a); transform: skewX(-12deg) translateY(-2px); }

.cdb .s-bracket { background: transparent; color: var(--b) !important; border: 0; border-radius: 0; padding-left: calc(var(--px, 28px) + .5em); padding-right: calc(var(--px, 28px) + .5em); }
.cdb .s-bracket::before, .cdb .s-bracket::after { position: absolute; top: 50%; opacity: 0; font-size: 1.5em; line-height: 1; transition: transform var(--dur, .3s) ease, opacity var(--dur, .3s) ease; }
.cdb .s-bracket::before { content: "["; left: .2em; transform: translate(-10px, -50%); }
.cdb .s-bracket::after { content: "]"; right: .2em; transform: translate(10px, -50%); }
.cdb .s-bracket:hover::before, .cdb .s-bracket:hover::after { opacity: 1; transform: translate(0, -50%); }

.cdb .s-double-border { outline: var(--bw, 2px) solid var(--b); outline-offset: 4px; }
.cdb .s-double-border:hover { outline-offset: 8px; }

/* ===================== BEVÆGELSE ===================== */
.cdb .s-shine:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px var(--b); }

.cdb .s-roll { overflow: hidden; }
.cdb .s-roll .cdb-l { display: block; overflow: hidden; height: 1.2em; }
.cdb .s-roll .cdb-lt { display: block; position: relative; transition: transform .38s cubic-bezier(.7, 0, .2, 1); }
.cdb .s-roll .cdb-lt::after { content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap; }
.cdb .s-roll:hover .cdb-lt { transform: translateY(-100%); }
.cdb .s-roll:hover { background: var(--dk); }

.cdb .s-icon-slide .cdb-ic { width: 0; opacity: 0; margin-left: -.55em; overflow: hidden; }
.cdb .s-icon-slide:hover .cdb-ic { width: 1.15em; opacity: 1; margin-left: 0; }
.cdb .s-icon-slide:hover { background: var(--dk); }

.cdb .s-bounce:hover { animation: cdb-bounce .6s ease; }
.cdb .s-wobble:hover { animation: cdb-wobble .7s ease; }
.cdb .s-shake:hover { animation: cdb-shake .5s ease; }
.cdb .s-float { animation: cdb-float 3s ease-in-out infinite; box-shadow: 0 10px 20px -10px var(--b); }
.cdb .s-float:hover { animation-play-state: paused; }
.cdb .s-pulse::after { content: ""; position: absolute; inset: calc(var(--bw, 2px) * -1); border-radius: inherit; z-index: -1; pointer-events: none; animation: cdb-ring 1.8s ease-out infinite; }

/* ===================== NYE FORMER ===================== */
.cdb .s-hexagon { border: 0; border-radius: 0; padding-left: calc(var(--px, 28px) + 10px); padding-right: calc(var(--px, 28px) + 10px); clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 16px 100%, 0 50%); }
.cdb .s-hexagon:hover { background: var(--a); }

.cdb .s-parallelogram { border: 0; border-radius: 0; padding-left: calc(var(--px, 28px) + 8px); padding-right: calc(var(--px, 28px) + 8px); clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%); }
.cdb .s-parallelogram:hover { background: var(--a); }

.cdb .s-double-arrow { border: 0; border-radius: 0; padding-left: calc(var(--px, 28px) + 12px); padding-right: calc(var(--px, 28px) + 12px); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); }
.cdb .s-double-arrow:hover { background: var(--a); }

.cdb .s-ticket, .cdb .s-badge { border: 0; border-radius: 0; }
.cdb .s-ticket {
	-webkit-mask: radial-gradient(circle 8px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
	mask: radial-gradient(circle 8px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 8px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}
.cdb .s-badge {
	-webkit-mask: radial-gradient(circle 8px at 0 0, #0000 97%, #000) top left / 51% 51% no-repeat, radial-gradient(circle 8px at 100% 0, #0000 97%, #000) top right / 51% 51% no-repeat,
		radial-gradient(circle 8px at 0 100%, #0000 97%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle 8px at 100% 100%, #0000 97%, #000) bottom right / 51% 51% no-repeat;
	mask: radial-gradient(circle 8px at 0 0, #0000 97%, #000) top left / 51% 51% no-repeat, radial-gradient(circle 8px at 100% 0, #0000 97%, #000) top right / 51% 51% no-repeat,
		radial-gradient(circle 8px at 0 100%, #0000 97%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle 8px at 100% 100%, #0000 97%, #000) bottom right / 51% 51% no-repeat;
}
.cdb .s-ticket:hover, .cdb .s-badge:hover { background: var(--a); }

.cdb .s-blob { border-radius: 58% 42% 55% 45% / 52% 58% 42% 48%; }
.cdb .s-blob:hover { border-radius: 42% 58% 45% 55% / 58% 42% 58% 42%; transform: rotate(-1.5deg) scale(1.03); box-shadow: 0 10px 22px -8px var(--b); }

.cdb .s-sketch { background: transparent; color: var(--b) !important; border: max(var(--bw, 2px), 2px) solid var(--b); border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; }
.cdb .s-sketch:hover { background: var(--b); color: var(--t) !important; transform: rotate(-1deg); }

/* ===================== NYE BEVÆGELSER ===================== */
.cdb .s-border-draw {
	background: linear-gradient(var(--b), var(--b)) 0 0 / 0 var(--bw, 2px) no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / var(--bw, 2px) 0 no-repeat,
		linear-gradient(var(--b), var(--b)) 100% 100% / 0 var(--bw, 2px) no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / var(--bw, 2px) 0 no-repeat;
	color: var(--b) !important; border-color: color-mix(in srgb, var(--b) 28%, transparent);
	transition: background-size .55s ease, color var(--dur, .3s) ease;
}
.cdb .s-border-draw:hover { background-size: 100% var(--bw, 2px), var(--bw, 2px) 100%, 100% var(--bw, 2px), var(--bw, 2px) 100%; }

.cdb .s-stripes {
	background: repeating-linear-gradient(-45deg, var(--b) 0 12px, color-mix(in srgb, var(--b) 78%, #fff) 12px 24px); background-size: 34px 34px;
}
.cdb .s-stripes:hover { animation: cdb-stripes .8s linear infinite; }

.cdb .s-spotlight-edge { border-color: transparent; }
.cdb .s-spotlight-edge::before { content: ""; position: absolute; inset: calc(var(--bw, 2px) * -1); border-radius: inherit; z-index: -2; pointer-events: none; background: conic-gradient(from var(--cdb-ang), transparent 0 55%, var(--a) 85%, transparent); animation: cdb-spin 2.4s linear infinite; }
.cdb .s-spotlight-edge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--b); z-index: -1; pointer-events: none; }
.cdb .s-spotlight-edge:hover { box-shadow: 0 0 22px -4px var(--a); }

/* ===================== FYLDT / STREG (valg pr. knap i modulet) ===================== */
/* Streg: gælder stile, hvor en kant giver mening. Hover fylder knappen. */
.cdb .cdb-btn.is-border:is(.s-solid, .s-pill, .s-square, .s-soft, .s-glow, .s-soft-shadow, .s-press-3d, .s-gradient, .s-gradient-pill, .s-gradient-flow, .s-aurora, .s-gel, .s-float, .s-bounce, .s-wobble, .s-shake, .s-pulse, .s-blob) {
	background: transparent; background-image: none; animation: none; box-shadow: none; text-shadow: none;
	color: var(--t) !important; border-color: var(--b);
}
.cdb .cdb-btn.is-border:is(.s-solid, .s-pill, .s-square, .s-soft, .s-glow, .s-soft-shadow, .s-press-3d, .s-gradient, .s-gradient-pill, .s-gradient-flow, .s-aurora, .s-gel, .s-float, .s-bounce, .s-wobble, .s-shake, .s-pulse, .s-blob):hover {
	background: var(--b); color: var(--h, #fff) !important; box-shadow: 0 8px 20px -6px var(--b);
}
/* Streg-stile, der allerede starter som streg: tekstfarven gælder, og ved hover bruges "tekstfarve ved hover". */
.cdb .cdb-btn.is-border:is(.s-outline, .s-outline-pill, .s-dashed, .s-sketch) { color: var(--t) !important; }
.cdb .cdb-btn.is-border:is(.s-outline, .s-outline-pill, .s-dashed, .s-sketch):hover { color: var(--h, #fff) !important; }
/* Egen kantfarve (sat i backend/modul): vinder over stilens egen kantfarve. */
.cdb .cdb-btn[style*="--bc:"] { border-color: var(--bc) !important; }
/* Fyldt: omvendt for de stile, der starter som streg. */
.cdb .cdb-btn.is-fill:is(.s-outline, .s-outline-pill, .s-dashed, .s-sketch) { background: var(--b); color: var(--t) !important; border-color: var(--b); }
.cdb .cdb-btn.is-fill:is(.s-outline, .s-outline-pill, .s-dashed, .s-sketch):hover { background: transparent; color: var(--b) !important; }

/* Ens hover: alle simple stile løfter sig let og får skygge, så to knapper med hver sin udfyldning reagerer ens. */
.cdb .s-outline:hover, .cdb .s-outline-pill:hover, .cdb .s-soft:hover, .cdb .s-square:hover, .cdb .s-dashed:hover,
.cdb .cdb-btn.is-fill:is(.s-outline, .s-outline-pill, .s-dashed):hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px var(--b); }

/* ===================== IKON-BADGE (tekst + rund ikon-knap i enden) =====================
   --b hovedfarve (knappen) · --t tekst · --a badge-farve (cirklen) · --ic pilens farve (standard: hovedfarven) */
.cdb [class*="s-badge-"] {
	--pb: calc(var(--py, 14px) * .42);
	padding: var(--pb) var(--pb) var(--pb) var(--px, 28px);
	gap: calc(var(--px, 28px) * .55); border-radius: 999px;
}
.cdb [class*="s-badge-"] .cdb-ic {
	position: relative; z-index: 1; width: 2.4em; height: 2.4em; border-radius: 50%; align-items: center; justify-content: center;
	background: var(--a); transition: background-color var(--dur, .3s) ease, box-shadow var(--dur, .3s) ease, transform var(--dur, .3s) ease;
}
.cdb [class*="s-badge-"] .cdb-ic svg { width: 1.1em; height: 1.1em; stroke: var(--ic, var(--b)); transition: transform var(--dur, .3s) cubic-bezier(.3, 1.5, .5, 1), stroke var(--dur, .3s) ease; }
.cdb [class*="s-badge-"]:hover .cdb-ic svg { transform: rotate(45deg); }
.cdb [class*="s-badge-"]:hover .cdb-ic.is-move { transform: none; }
.cdb [class*="s-badge-"]:hover .cdb-ic.is-move svg { transform: translateX(.18em); }

.cdb .s-badge-pill:hover, .cdb .s-badge-gradient:hover, .cdb .s-badge-light:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px var(--b); }

.cdb .s-badge-pill-left { padding: var(--pb) var(--px, 28px) var(--pb) var(--pb); }
.cdb .s-badge-pill-left .cdb-ic { order: -1; }
.cdb .s-badge-pill-left:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px var(--b); }

/* Cirklen vokser og fylder hele knappen ved hover */
.cdb .s-badge-expand { overflow: hidden; }
.cdb .s-badge-expand .cdb-ic { z-index: 0; }
.cdb .s-badge-expand .cdb-l { position: relative; z-index: 1; }
.cdb .s-badge-expand:hover .cdb-ic { box-shadow: 0 0 0 420px var(--a); }
.cdb .s-badge-expand:hover { color: var(--b) !important; }

.cdb .s-badge-outline { background: transparent; color: var(--b) !important; border-color: var(--b); }
.cdb .s-badge-outline .cdb-ic { background: var(--b); }
.cdb .s-badge-outline .cdb-ic svg { stroke: var(--ic, var(--t)); }
.cdb .s-badge-outline:hover { background: var(--b); color: var(--t) !important; }
.cdb .s-badge-outline:hover .cdb-ic { background: var(--a); }
.cdb .s-badge-outline:hover .cdb-ic svg { stroke: var(--ic, var(--b)); }

.cdb .s-badge-light { background: color-mix(in srgb, var(--b) 12%, #fff); color: var(--b) !important; border-color: transparent; }
.cdb .s-badge-light .cdb-ic { background: var(--b); }
.cdb .s-badge-light .cdb-ic svg { stroke: var(--ic, var(--t)); }

.cdb .s-badge-gradient { background: linear-gradient(135deg, var(--b), var(--a)); background-origin: border-box; }
.cdb .s-badge-gradient .cdb-ic { background: #fff; }

.cdb .s-badge-square { border-radius: var(--r, 8px); }
.cdb .s-badge-square .cdb-ic { border-radius: max(0px, calc(var(--r, 8px) - 4px)); }
.cdb .s-badge-square:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px var(--b); }

.cdb .s-badge-glass { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .38); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, .15); }
.cdb .s-badge-glass .cdb-ic { background: rgba(255, 255, 255, .3); }
.cdb .s-badge-glass .cdb-ic svg { stroke: var(--ic, #fff); }
.cdb .s-badge-glass:hover { background: rgba(255, 255, 255, .26); }

.cdb .s-badge-3d { box-shadow: 0 6px 0 var(--dk); }
.cdb .s-badge-3d:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--dk); }
.cdb .s-badge-3d:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--dk); }

.cdb .s-badge-glow { box-shadow: 0 0 22px -2px var(--b); }
.cdb .s-badge-glow .cdb-ic { box-shadow: 0 0 16px var(--a); }
.cdb .s-badge-glow:hover { box-shadow: 0 0 38px 2px var(--b); transform: translateY(-2px); }

/* To adskilte dele: tekst-pille + rund badge. Mellemrummet lukker sig ved hover. */
.cdb .s-badge-split { background: transparent; border: 0; padding: 0; gap: 5px; border-radius: 0; }
.cdb .s-badge-split .cdb-l { background: var(--b); color: var(--t); padding: var(--py, 14px) var(--px, 28px); border-radius: 999px; transition: background-color var(--dur, .3s) ease; }
.cdb .s-badge-split .cdb-ic { width: calc(1.2em + var(--py, 14px) * 2); height: calc(1.2em + var(--py, 14px) * 2); }
.cdb .s-badge-split .cdb-ic svg { width: 1.2em; height: 1.2em; }
.cdb .s-badge-split:hover { gap: 2px; }
.cdb .s-badge-split:hover .cdb-l { background: var(--dk); }
.cdb .s-badge-split.s-badge-split:active { transform: scale(.98); }

/* ---------- Keyframes ---------- */
@keyframes cdb-stripes { to { background-position: 34px 0; } }
@keyframes cdb-flow { 0%, 100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes cdb-aurora { 0% { background-position: 0 0; } 100% { background-position: 100% 100%; } }
@keyframes cdb-neon { from { box-shadow: 0 0 6px var(--b), inset 0 0 6px color-mix(in srgb, var(--b) 30%, transparent); } to { box-shadow: 0 0 22px var(--b), 0 0 40px color-mix(in srgb, var(--b) 60%, transparent), inset 0 0 14px color-mix(in srgb, var(--b) 50%, transparent); } }
@keyframes cdb-spin { to { --cdb-ang: 360deg; } }
@keyframes cdb-bounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-9px); } 50% { transform: translateY(0); } 75% { transform: translateY(-4px); } }
@keyframes cdb-wobble { 0%, 100% { transform: none; } 20% { transform: rotate(-4deg) scale(1.03); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } }
@keyframes cdb-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes cdb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cdb-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--b) 60%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }

@media (prefers-reduced-motion: reduce) {
	.cdb .cdb-btn, .cdb .cdb-btn::before, .cdb .cdb-btn::after { animation: none !important; transition-duration: .01s !important; }
}

/* Divi 5 Visual Builder: vises kort mens knapperne hentes */
.cdb-d5-loading { padding: 12px 0; font: 13px/1.4 system-ui, sans-serif; color: #888; }

/* Tekstfarve ved hover (sat i backend/modul): gælder alle stile og både fyldt og streg. Høj specificitet, så den vinder over stilens egen hover-tekstfarve. */
.cdb .cdb-btn.has-h.has-h.has-h:hover, .cdb .cdb-btn.has-h.has-h.has-h:focus-visible { color: var(--h) !important; }