/* Golden Dots: uitgelicht blok naar de bingokaarten maker */
.gdbk-promo {
	--p-navy: #1E2A44;
	--p-red: #C8412E;
	--p-gold: #E9A23B;
	--p-cream: #FBF4E4;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
	margin: 40px 0;
	border-radius: 20px;
	overflow: hidden;
	background: var(--p-navy);
	color: var(--p-cream);
	font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
	line-height: 1.5;
	box-shadow: 0 18px 40px rgba(30, 42, 68, .22);
	text-align: left;
}
.gdbk-promo * { box-sizing: border-box; }
.gdbk-promo p { margin: 0; }

/* Linkerkant: kaartje op de speltafel */
.gdbk-promo-visual {
	position: relative;
	min-height: 330px;
	background-color: var(--p-red);
	background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 2px, transparent 2.5px);
	background-size: 22px 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 28px 20px;
}
.gdbk-promo--90 .gdbk-promo-visual { background-color: #2F5D9E; }
.gdbk-promo--woorden .gdbk-promo-visual { background-color: #2E7550; }

.gdbk-mini {
	position: relative;
	z-index: 1;
	width: 210px;
	padding: 9px;
	border-radius: 10px;
	background: #fff;
	color: #1C1C1C;
	border: 3px solid var(--p-red);
	box-shadow: 0 16px 30px rgba(0, 0, 0, .3);
	transform: rotate(-5deg);
	transition: transform .25s ease;
}
.gdbk-promo:hover .gdbk-mini { transform: rotate(-2deg) scale(1.03); }
.gdbk-promo--90 .gdbk-mini { width: 250px; border-color: #2F5D9E; }
.gdbk-promo--woorden .gdbk-mini { border-color: #2E7550; }
.gdbk-mini-head { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; margin-bottom: 5px !important; }
.gdbk-mini-head span:last-child { font-weight: 500; }
.gdbk-mini-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.gdbk-mini-90 .gdbk-mini-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.gdbk-mini-grid span {
	position: relative;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #D9CFBC;
	border-radius: 4px;
	font-family: 'Bungee', 'Rubik', sans-serif;
	font-size: 13px;
	line-height: 1;
}
.gdbk-mini-90 .gdbk-mini-grid span { font-size: 10px; border-radius: 3px; }
.gdbk-mini-woorden .gdbk-mini-grid span { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 7.5px; }
.gdbk-mini-grid .is-letter { background: var(--p-red); border-color: var(--p-red); color: #fff; font-size: 16px; }
.gdbk-mini-woorden .gdbk-mini-grid .is-letter { background: #2E7550; border-color: #2E7550; font-family: 'Bungee', sans-serif; font-size: 16px; font-weight: 400; }
.gdbk-mini-grid .is-free { background: var(--p-red); border-color: var(--p-red); color: #fff; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 8px; }
.gdbk-mini-woorden .gdbk-mini-grid .is-free { background: #2E7550; border-color: #2E7550; }
.gdbk-mini-grid .is-empty { background: #EFE7D6; border-color: #EFE7D6; }
.gdbk-mini-grid .is-mark::after {
	content: '';
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background: rgba(233, 162, 59, .7);
}

.gdbk-promo-ball {
	position: absolute;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .28);
}
.gdbk-promo-ball span {
	border-radius: 50%;
	background: var(--p-cream);
	color: var(--p-navy);
	font-family: 'Bungee', 'Rubik', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gdbk-promo-ball-a { top: 18px; left: 18px; width: 70px; height: 70px; background: var(--p-navy); transform: rotate(-12deg); }
.gdbk-promo-ball-a span { width: 40px; height: 40px; font-size: 15px; }
.gdbk-promo-ball-b { bottom: 20px; right: 20px; width: 56px; height: 56px; background: var(--p-gold); transform: rotate(10deg); }
.gdbk-promo-ball-b span { width: 32px; height: 32px; font-size: 12px; }

/* Rechterkant: tekst en knop */
.gdbk-promo-body { padding: 30px 32px 28px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.gdbk-promo-kicker { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--p-gold); }
.gdbk-promo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-gold); box-shadow: 12px 0 0 var(--p-gold), 24px 0 0 var(--p-gold); margin-right: 24px; }
.gdbk-promo .gdbk-promo-title { font-family: 'Bungee', 'Rubik', sans-serif; font-size: 27px; line-height: 1.12; color: #fff; }
.gdbk-promo-text { font-size: 16px; color: #D5D9E3; }
.gdbk-promo .gdbk-promo-list { list-style: none; margin: 2px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.gdbk-promo .gdbk-promo-list li { position: relative; margin: 0; padding-left: 28px; font-size: 15px; color: var(--p-cream); }
.gdbk-promo .gdbk-promo-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--p-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2A44' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.gdbk-promo .gdbk-promo-btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 0 24px;
	border-radius: 12px;
	background: var(--p-gold);
	color: var(--p-navy);
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 6px 0 #B97A1F;
	transition: transform .15s ease, box-shadow .15s ease;
}
.gdbk-promo .gdbk-promo-btn:hover { color: var(--p-navy); transform: translateY(2px); box-shadow: 0 4px 0 #B97A1F; }
.gdbk-promo .gdbk-promo-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gdbk-promo-btn svg { transition: transform .15s ease; }
.gdbk-promo .gdbk-promo-btn:hover svg { transform: translateX(3px); }
.gdbk-promo-small { font-size: 13px; color: #AEB6C8; margin-top: 4px !important; }

@media (max-width: 680px) {
	.gdbk-promo { grid-template-columns: minmax(0, 1fr); }
	.gdbk-promo-visual { min-height: 250px; }
	.gdbk-promo-body { padding: 24px 22px 26px; }
	.gdbk-promo .gdbk-promo-title { font-size: 23px; }
	.gdbk-promo .gdbk-promo-btn { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.gdbk-mini, .gdbk-promo-btn, .gdbk-promo-btn svg { transition: none; }
}