/* ==========================================================================
   DoctorCura Design - keuzescherm voor het leverland
   Computer: gestapelde SVG-lagen met CSS-3D, bijschriften met vlag langs de rand.
   Telefoon: geen kaart, maar een raster met vlaggen en een langzaam draaiend bolletje.
   Het scherm staat altijd in de HTML; alleen deze stijl beslist of het zichtbaar is.
   ========================================================================== */

/* Hoeken die in calc() meelopen, zodat de binnenkomst en de kanteling vloeiend blijven. */
@property --dck-kantel {
	syntax: '<angle>';
	inherits: true;
	initial-value: 20deg;
}
@property --dck-schaal {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}
@property --dck-op {
	syntax: '<number>';
	inherits: false;
	initial-value: 1;
}

.dck {
	--dck-kaart-blauw: #0560ff;
	--dck-diep: 10 45 120;
	--dck-kaartje: 204px;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 24px 16px;
	font-family: var(--dcd-font);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/* Tonen: zolang er geen land gekozen is (klasse uit het scriptje in de kop), of als het script het scherm opent. */
html.dcd-kein-land .dck,
.dck.is-open { display: flex; }
/* Centreren met auto-marges en niet met align-items: anders valt de bovenkant weg zodra het paneel hoger is dan het
   venster, en dan is de kop niet meer te bereiken. */

/* De pagina eronder staat stil zolang de keuze open is. */
html.dcd-kein-land body,
body.dck-offen {
	overflow: hidden !important;
}

.dck__achtergrond {
	position: fixed;
	inset: 0;
	background:
		radial-gradient(900px 520px at 20% 0%, rgba(5, 96, 255, .34), transparent 62%),
		radial-gradient(760px 480px at 88% 100%, rgba(255, 122, 89, .22), transparent 60%),
		linear-gradient(160deg, rgba(8, 22, 52, .94), rgba(6, 16, 38, .97));
	animation: dck-doek .5s var(--dcd-ease) both;
}

.dck__paneel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1180px;
	margin: auto;
	padding: 34px 34px 26px;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: var(--dcd-radius-xl);
	background: linear-gradient(180deg, #ffffff 0%, #f1f6ff 100%);
	box-shadow: 0 60px 120px -40px rgba(4, 22, 66, .6), 0 10px 30px -18px rgba(4, 22, 66, .4);
	animation: dck-paneel .55s var(--dcd-ease) both;
}

@keyframes dck-doek { from { opacity: 0; } to { opacity: 1; } }
@keyframes dck-paneel { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- Kop ---------- */

.dck__kop { position: relative; text-align: center; }
.dck__eyebrow {
	display: inline-block;
	margin-bottom: 8px;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--dcd-blue-50);
	color: var(--dcd-blue-600);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.dck__titel {
	margin: 0 0 6px;
	font-family: var(--dcd-font-head);
	font-size: clamp(25px, 3.1vw, 39px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
	color: var(--dcd-navy);
}
.dck__sub { margin: 0; color: var(--dcd-muted); font-size: 15.5px; line-height: 1.5; }
/* Melding na een verlopen keuze: de POST kwam zonder geldige nonce binnen en leidde terug naar dit scherm. */
.dck__melding {
	margin: 10px 0 0;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(255, 122, 89, .16);
	color: #ffd9cd;
	font-size: 14.5px;
	line-height: 1.45;
}
.dck__hint { margin: 14px 0 0; text-align: center; color: #8494b2; font-size: 13px; }

.dck__sluiten {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: none;
	width: 40px;
	height: 40px;
	padding: 8px;
	border: 1px solid var(--dcd-line) !important;
	border-radius: 50%;
	background: #fff !important;
	color: var(--dcd-muted) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: color .25s var(--dcd-ease), border-color .25s var(--dcd-ease), transform .25s var(--dcd-ease);
}
.dck.is-open .dck__sluiten { display: block; }
/* Zonder gekozen land is er niets om naar terug te keren, dus dan geen kruisje. */
html.dcd-kein-land .dck__sluiten { display: none; }
.dck__sluiten:hover { color: var(--dcd-navy) !important; border-color: #b9c9e4 !important; transform: rotate(90deg); }
.dck__sluiten:focus-visible { outline: 3px solid var(--dcd-blue); outline-offset: 3px; }
.dck__sluiten svg { display: block; width: 100%; height: 100%; }

/* ---------- Stap 1 en stap 2 ---------- */

.dck__stap--sprache { display: block; }
.dck-talen { display: none; }
.dck-talen:target,
.dck-talen.is-open { display: block; animation: dck-paneel .4s var(--dcd-ease) both; }
/* Zodra er een taalpaneel open staat, gaat de kaart weg. */
.dck__paneel:has(.dck-talen:target) .dck__stap--land,
.dck.is-stap2 .dck__stap--land { display: none; }

/* ---------- De kaart ---------- */

.dck-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.dck-buehne {
	position: relative;
	width: 100%;
	max-width: 1040px;
	margin: 16px auto 0;
	aspect-ratio: 1000 / 700;
	max-height: min(58vh, 620px);
	perspective: 1500px;
	perspective-origin: 50% 46%;
	animation: dck-buehne-in .85s var(--dcd-ease) both;
}
@keyframes dck-buehne-in {
	from { --dck-kantel: 37deg; opacity: 0; }
	to { --dck-kantel: 20deg; opacity: 1; }
}

.dck-toneel {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transform-style: preserve-3d;
	transform: rotateX(var(--dck-kantel)) rotateX(var(--dcd-rx, 0deg)) rotateY(var(--dcd-ry, 0deg));
	transition: transform .5s var(--dcd-ease);
}
.dck-buehne.is-tilting .dck-toneel { transition: transform .12s linear; }

.dck-plaat {
	position: absolute;
	inset: 2% 1% 6%;
	border-radius: 46px;
	background: linear-gradient(160deg, #eaf1fe 0%, #d7e6ff 55%, #c8dbfb 100%);
	box-shadow: 0 70px 100px -44px rgba(5, 50, 150, .62), inset 0 1px 0 rgba(255, 255, 255, .9);
	transform: translateZ(-38px);
}
.dck-gloed {
	position: absolute;
	inset: 6% 6% 10%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(5, 96, 255, .3), rgba(5, 96, 255, 0) 72%);
	transform: translateZ(-24px);
	filter: blur(6px);
}

.dck-laag {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Dieptelagen: silhouet in één kleur, met stroke in diezelfde kleur zodat de naden tussen buurlanden dichtgaan en de
   zijkant van de extrusie massief oogt in plaats van gestreept. */
.dck-laag--diep {
	fill: rgb(var(--dck-diep) / calc(.08 + var(--i) * .062));
	stroke: rgb(var(--dck-diep) / calc(.08 + var(--i) * .062));
	stroke-width: 2.6;
	transform: translateZ(calc(var(--i) * -3.4px));
}
.dck-laag--top { transform: translateZ(1px); }
.dck-laag--lijnen { transform: translateZ(8px); }

.dck-land--rand { fill: #dde7f7; stroke: #cddcf1; stroke-width: 1; }
.dck-land--bald { fill: #a9bdd9; stroke: #edf3fc; stroke-width: 1.1; }
.dck-land--aan {
	fill: url(#dcd-k-verloop);
	stroke: rgba(255, 255, 255, .62);
	stroke-width: 1.2;
	transition: fill .3s var(--dcd-ease);
}
.dck-land--aan.is-hot { fill: url(#dcd-k-verloop-hot); }

.dck-lijn {
	stroke: rgba(5, 96, 255, .62);
	stroke-width: 1.7;
	stroke-dasharray: 4 5;
	stroke-linecap: round;
	transition: stroke .3s var(--dcd-ease), stroke-width .3s var(--dcd-ease);
}
.dck-lijn.is-hot { stroke: var(--dcd-coral); stroke-width: 2.4; stroke-dasharray: none; }
.dck-stip {
	fill: var(--dck-kaart-blauw);
	stroke: #fff;
	stroke-width: 1.6;
	transition: fill .3s var(--dcd-ease), r .3s var(--dcd-ease);
}
.dck-stip.is-hot { fill: var(--dcd-coral); r: 7.5; }

/* ---------- De bijschriften: de echte knoppen ---------- */

.dck-knoppen { position: absolute; inset: 0; transform-style: preserve-3d; }

.dck-kop-klein {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dck-kaartje {
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	width: var(--dck-kaartje);
	min-height: 56px;
	padding: 9px 12px 9px 11px;
	border: 1px solid rgba(180, 201, 236, .9);
	border-radius: 15px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 10px 22px -12px rgba(8, 36, 96, .5);
	color: var(--dcd-navy);
	text-align: left;
	text-decoration: none !important;
	transform:
		translate(-50%, -50%)
		translateZ(30px)
		rotateY(calc(var(--dcd-ry, 0deg) * -1))
		rotateX(calc((var(--dck-kantel) + var(--dcd-rx, 0deg)) * -1))
		scale(var(--dck-schaal));
	animation: dck-kaartje-in .6s var(--dcd-ease) both;
	animation-delay: var(--dcd-delay, 0ms);
	transition: border-color .3s var(--dcd-ease), box-shadow .3s var(--dcd-ease), background .3s var(--dcd-ease);
}
@keyframes dck-kaartje-in {
	from { opacity: 0; --dck-schaal: .84; }
	to { opacity: 1; --dck-schaal: 1; }
}

.dck-kaartje__vlag { flex: none; }
.dck-vlag {
	position: relative;
	display: block;
	flex: none;
	width: 40px;
	height: 27px;
	overflow: hidden;
	border-radius: 6px;
	vertical-align: middle;
	box-shadow: 0 0 0 2px #fff, 0 7px 14px -6px rgba(8, 36, 96, .55);
	transition: box-shadow .35s var(--dcd-ease), filter .35s var(--dcd-ease);
}
.dck-vlag svg { display: block; width: 100%; height: 100%; }
/* Glansrand: maakt een platte vlag ineens fysiek. Zelfde opzet als de taalvlaggen van het portaal. */
.dck-vlag::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(10, 26, 61, .22);
	background: linear-gradient(180deg, rgba(255, 255, 255, .38) 0, rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .12) 100%);
}
/* Stofplooi: een zachte licht- en schaduwband die langzaam over de vlag loopt. Zo leeft de vlag zonder hard te kantelen. */
.dck-vlag::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .34) 34%, rgba(0, 0, 0, .09) 50%, rgba(255, 255, 255, .26) 66%, rgba(255, 255, 255, 0) 82%);
	background-size: 260% 100%;
	background-position: 130% 0;
	mix-blend-mode: soft-light;
}
.dck-kaartje--aan .dck-vlag::before {
	animation: dck-plooi 5.5s ease-in-out infinite;
	animation-delay: var(--d, 0s);
}
@keyframes dck-plooi {
	0% { background-position: 130% 0; }
	100% { background-position: -130% 0; }
}
.dck-vlag--groot { width: 48px; height: 32px; border-radius: 7px; }
.dck-vlag--taal { width: 30px; height: 20px; border-radius: 5px; }

/* Het vlaggetje wappert rustig, met een eigen starttijd per land zodat ze niet in de maat lopen. */
.dck-kaartje--aan .dck-vlag {
	animation: dck-wapper 7s ease-in-out infinite;
	animation-delay: var(--d, 0s);
	transform-origin: left center;
}
@keyframes dck-wapper {
	0%, 100% { transform: perspective(240px) rotateY(0) skewY(0); }
	35% { transform: perspective(240px) rotateY(-6deg) skewY(.5deg); }
	70% { transform: perspective(240px) rotateY(4deg) skewY(-.3deg); }
}

/* ==========================================================================
   Wapperende vlag als stof (dcd_land_schermen_vlag_stof): achttien verticale stroken van hetzelfde beeld die met een
   kleine vertraging op en neer golven. Aan de stok bijna stil, aan de vrije kant het meest, met licht en schaduw in
   de plooien. Het doek beweegt zo als een golf en niet als een plaat die heen en weer kantelt.
   ========================================================================== */
.dck-vlag.dck-vlag--stof {
	--w: 40px;
	display: flex;
	width: var(--w);
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
	background: none;
	filter: drop-shadow(0 5px 7px rgba(8, 36, 96, .32));
	animation: none;
	transform: none;
}
.dck-vlag.dck-vlag--stof::before,
.dck-vlag.dck-vlag--stof::after { display: none; }
.dck-vlag--stof i {
	/* Iets breder dan een strook met een negatieve marge, zodat er nooit een haarlijn tussen twee stroken valt. */
	--amp: calc(.12px + var(--i) * .115px);
	display: block;
	flex: none;
	width: calc(var(--w) / var(--n) + .6px);
	height: 100%;
	margin-right: -.6px;
	background-image: var(--vlag);
	background-repeat: no-repeat;
	background-size: var(--w) 100%;
	background-position: calc(var(--w) / var(--n) * var(--i) * -1) 0;
	animation: dck-stof 2.6s ease-in-out infinite;
	animation-delay: calc(var(--i) * -.1s);
	will-change: transform;
}
.dck-vlag--stof i:first-child { border-radius: 4px 0 0 4px; }
.dck-vlag--stof i:last-child { margin-right: 0; border-radius: 0 4px 4px 0; }
@keyframes dck-stof {
	0%, 100% { transform: translateY(calc(var(--amp) * -1)); filter: brightness(1.07); }
	50%      { transform: translateY(var(--amp)); filter: brightness(.9); }
}
/* Zweven of toetsenbord: het doek komt iets meer los en vangt een zachte koraalgloed. */
.dck-kaartje--aan:hover .dck-vlag--stof,
.dck-kaartje--aan:focus-visible .dck-vlag--stof,
.dck-kaartje--aan.is-hot .dck-vlag--stof { filter: drop-shadow(0 6px 9px rgba(255, 106, 74, .45)); }
.dck-kaartje--aan:hover .dck-vlag--stof i,
.dck-kaartje--aan:focus-visible .dck-vlag--stof i,
.dck-kaartje--aan.is-hot .dck-vlag--stof i { --amp: calc(.16px + var(--i) * .16px); animation-duration: 1.7s; }
/* Landen van binnenkort: stil doek, want er valt nog niets te kiezen. */
.dck-kaartje:not(.dck-kaartje--aan) .dck-vlag--stof i { animation: none; transform: none; filter: none; }
.dck-vlag--stof.dck-vlag--groot { --w: 48px; height: 32px; }

.dck-kaartje__tekst { display: block; min-width: 0; flex: 1; }
.dck-kaartje__naam {
	display: block;
	font-family: var(--dcd-font-head);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dck-kaartje__talen { display: flex; gap: 5px; margin-top: 2px; }
.dck-kaartje__talen i {
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--dcd-blue-50);
	color: var(--dcd-blue-600);
	font-size: 10px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: .04em;
}
.dck-kaartje__pijl { flex: none; width: 16px; height: 16px; color: #9fb4d6; transition: color .3s var(--dcd-ease), transform .3s var(--dcd-ease); }
.dck-kaartje__pijl svg { display: block; width: 100%; height: 100%; }

.dck-kaartje--aan:hover,
.dck-kaartje--aan:focus-visible,
.dck-kaartje--aan.is-hot {
	border-color: rgba(255, 122, 89, .85);
	background: #fff;
	box-shadow: 0 18px 34px -14px rgba(255, 106, 74, .6);
}
.dck-kaartje--aan:hover .dck-kaartje__pijl,
.dck-kaartje--aan.is-hot .dck-kaartje__pijl { color: var(--dcd-coral); transform: translateX(3px); }
.dck-kaartje--aan:hover .dck-vlag,
.dck-kaartje--aan:focus-visible .dck-vlag,
.dck-kaartje--aan.is-hot .dck-vlag {
	animation-duration: 3.4s;
	filter: saturate(1.12) brightness(1.04);
	box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255, 122, 89, .28), 0 10px 18px -6px rgba(255, 106, 74, .55);
}
.dck-kaartje--aan:hover .dck-vlag::before,
.dck-kaartje--aan:focus-visible .dck-vlag::before,
.dck-kaartje--aan.is-hot .dck-vlag::before { animation-duration: 2.2s; }
.dck-kaartje--aan:focus-visible { outline: 3px solid var(--dcd-blue); outline-offset: 3px; }

.dck-kaartje--bald {
	border-style: dashed;
	border-color: #c6d3e8;
	background: rgba(243, 247, 253, .92);
	box-shadow: none;
	color: #7e8ea9;
	cursor: default;
}
.dck-kaartje--bald .dck-kaartje__naam { font-weight: 600; }
.dck-kaartje__bald { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }

/* ---------- Stap 2: de talen ---------- */

.dck-talen { max-width: 640px; margin: 0 auto; padding: 8px 0 4px; text-align: center; }
.dck-terug {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 18px;
	padding: 8px 15px;
	border: 1.5px solid var(--dcd-line) !important;
	border-radius: 999px;
	background: #fff !important;
	color: var(--dcd-muted) !important;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color .25s var(--dcd-ease), color .25s var(--dcd-ease);
}
.dck-terug svg { width: 15px; height: 15px; }
.dck-terug:hover { border-color: #a9c1ea !important; color: var(--dcd-navy) !important; }
.dck-terug:focus-visible { outline: 3px solid var(--dcd-blue); outline-offset: 3px; }

.dck-talen__kop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 6px;
	font-family: var(--dcd-font-head);
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--dcd-navy);
}
.dck-talen__eyebrow {
	margin: 0 0 6px;
	color: var(--dcd-blue-600);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.dck-talen__sub { margin: 0 0 22px; color: var(--dcd-muted); font-size: 15px; }
.dck-talen__rij { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dck-taalform { margin: 0; }

.dck-taal {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 20px;
	/* Met !important: de knop staat ook binnen WooCommerce- en Elementor-stijlen die elke submit-knop inkleuren. */
	border: 1.5px solid #c4d4ee !important;
	border-radius: 999px;
	background: #fff !important;
	color: var(--dcd-navy) !important;
	font-family: var(--dcd-font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .25s var(--dcd-ease), background .25s var(--dcd-ease), transform .25s var(--dcd-ease), box-shadow .25s var(--dcd-ease);
}
.dck-taal:hover, .dck-taal:focus { border-color: var(--dcd-blue) !important; background: var(--dcd-blue-50) !important; color: var(--dcd-navy) !important; transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(5, 96, 255, .8); }
.dck-taal:focus-visible { outline: 3px solid var(--dcd-blue); outline-offset: 3px; }
.dck-taal__code { display: none; color: var(--dcd-muted); font-size: 12px; font-weight: 700; }

/* ---------- Bolletje boven het raster (telefoon) ---------- */

.dck-bol {
	position: relative;
	display: none;
	width: 124px;
	height: 124px;
	margin: 0 auto 14px;
	border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle at 34% 28%, #6fa5ff 0%, #0560ff 52%, #0a3596 100%);
	box-shadow: 0 22px 40px -18px rgba(5, 50, 150, .8), inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.dck-bol__draai { position: absolute; inset: 0; display: flex; width: 200%; animation: dck-draai 30s linear infinite; }
.dck-bol__draai svg { width: 50%; height: 100%; fill: rgba(255, 255, 255, .62); }
.dck-bol__glans {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 46%),
		radial-gradient(circle at 74% 82%, rgba(3, 20, 60, .5), rgba(3, 20, 60, 0) 52%);
}
@keyframes dck-draai { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Knop in de bovenbalk ---------- */

.dck-topknop { display: inline-flex; margin: 0; }
.dck-topknop__knop {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 28px;
	padding: 4px 11px 4px 7px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: inherit;
	font: 600 12.5px/1 var(--dcd-font);
	cursor: pointer;
	transition: background .25s var(--dcd-ease), border-color .25s var(--dcd-ease);
}
.dck-topknop__knop:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); }
.dck-topknop__knop:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.dck-topknop__vlaggen { position: relative; display: block; width: 24px; height: 16px; }
.dck-topknop__vlag { display: none; width: 24px; height: 16px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.dck-topknop__vlag svg { display: block; width: 100%; height: 100%; }
.dck-topknop__bol { display: block; width: 18px; height: 18px; margin: -2px 0 0 1px; }
.dck-topknop__bol svg { display: block; width: 100%; height: 100%; }
.dck-topknop__tekst--aendern { display: none; }
/* De HTML is gecached en dus voor iedereen gelijk: het scriptje in de kop zet data-dcd-land en de stijl kiest hier. */
html[data-dcd-land] .dck-topknop__bol,
html[data-dcd-land] .dck-topknop__tekst--waehlen { display: none; }
html[data-dcd-land] .dck-topknop__tekst--aendern { display: inline; }
html[data-dcd-land="DE"] .dck-topknop__vlag[data-land="DE"],
html[data-dcd-land="AT"] .dck-topknop__vlag[data-land="AT"],
html[data-dcd-land="CH"] .dck-topknop__vlag[data-land="CH"],
html[data-dcd-land="LI"] .dck-topknop__vlag[data-land="LI"],
html[data-dcd-land="LU"] .dck-topknop__vlag[data-land="LU"],
html[data-dcd-land="FR"] .dck-topknop__vlag[data-land="FR"],
html[data-dcd-land="BE"] .dck-topknop__vlag[data-land="BE"],
html[data-dcd-land="NL"] .dck-topknop__vlag[data-land="NL"] { display: block; }

/* ==========================================================================
   Telefoon en tablet: geen kaart. Op 388 px liggen twaalf bijschriftparen over
   elkaar heen, dus daar een raster met grote vlaggen en het bolletje erboven.
   ========================================================================== */

@media (max-width: 900px) {
	.dck { padding: 0; }
	.dck__paneel { margin: 0; }
	.dck__paneel {
		max-width: none;
		min-height: 100%;
		margin: 0;
		padding: 26px 16px 30px;
		border: 0;
		border-radius: 0;
	}
	.dck__titel { font-size: clamp(23px, 6.4vw, 30px); }
	.dck__sub { font-size: 14.5px; }
	.dck-bol { display: block; }

	.dck-buehne {
		position: static;
		max-width: none;
		margin: 20px 0 0;
		aspect-ratio: auto;
		max-height: none;
		perspective: none;
		animation: none;
	}
	.dck-toneel { display: none; }

	.dck-knoppen {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 11px;
		transform-style: flat;
	}
	.dck-kop-klein {
		position: static;
		grid-column: 1 / -1;
		width: auto;
		height: auto;
		margin: 6px 0 0;
		padding: 0;
		overflow: visible;
		clip: auto;
		color: #8494b2;
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: .09em;
		text-transform: uppercase;
	}

	.dck-kaartje {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 9px;
		inset: auto;
		width: auto;
		min-height: 96px;
		padding: 13px;
		border-radius: 18px;
		transform: none;
		animation-name: dck-kaartje-op;
	}
	.dck-kaartje__pijl { position: absolute; top: 13px; right: 12px; }
	.dck-kaartje--aan { position: relative; }
	.dck-vlag { width: 52px; height: 35px; border-radius: 7px; }
	.dck-vlag.dck-vlag--stof { --w: 52px; }
	.dck-kaartje__naam { font-size: 15px; white-space: normal; }
	.dck-kaartje__talen { margin-top: 4px; }

	.dck-talen { padding-top: 4px; }
	.dck-talen__rij { flex-direction: column; align-items: stretch; }
	.dck-taal { justify-content: flex-start; width: 100%; border-radius: 16px; }
}

@keyframes dck-kaartje-op {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 400px) {
	.dck-kaartje { min-height: 88px; padding: 11px; }
	.dck-kaartje__naam { font-size: 14px; }
	.dck-vlag { width: 46px; height: 31px; }
	.dck-vlag.dck-vlag--stof { --w: 46px; }
}

/* Smalle bovenbalk: alleen de vlag, de tekst blijft voor schermlezers. */
@media (max-width: 782px) {
	.dck-topknop__tekst { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	html[data-dcd-land] .dck-topknop__tekst--aendern { display: block; }
	.dck-topknop__knop { padding: 4px 8px; }
}

/* ==========================================================================
   Minder beweging: de kaart blijft 3D en blijft mooi, maar staat stil.
   Het kleurverschil bij zweven blijft, want dat is informatie en geen versiering.
   design.css zet hier al animation: none op alles; hier komt de stand erbij.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.dck-buehne { --dck-kantel: 15deg; opacity: 1; }
	.dck-toneel { transition: none; }
	.dck-kaartje { opacity: 1; }
	.dck__paneel, .dck__achtergrond { opacity: 1; transform: none; }
	.dck-vlag, .dck-vlag::before, .dck-vlag--stof i { animation: none !important; transform: none !important; filter: none !important; }
}

/* Bezoeker uit een land dat er niet bij staat: onopvallende uitweg onder het scherm.
   Specificiteit bewust hoog: het thema en de Elementor-kit zetten anders hun eigen knopkleuren (roze) erop. */
.dck .dck__egal { display: block; width: 100%; margin: 10px 0 0; text-align: center; }
.dck .dck__egal button.dck__egal-knop,
.dck .dck__egal button.dck__egal-knop:hover,
.dck .dck__egal button.dck__egal-knop:focus,
.dck .dck__egal button.dck__egal-knop:active {
	display: inline-block; width: auto; min-height: 0; border: 0; border-radius: 10px; padding: 6px 10px; cursor: pointer;
	background: none; box-shadow: none; text-transform: none; letter-spacing: normal;
	font: 500 13px/1.3 var(--dcd-font); color: var(--dcd-muted); text-decoration: underline;
}
.dck .dck__egal button.dck__egal-knop:hover,
.dck .dck__egal button.dck__egal-knop:focus-visible { color: var(--dcd-blue); }
.dck .dck__egal button.dck__egal-knop:focus-visible { outline: 2px solid var(--dcd-blue); outline-offset: 2px; }

/* Eigen spelling van het land: bij tweetalige landen staat de tweede naam kleiner eronder (België / Belgique). */
.dck-naam-twee {
	display: block;
	margin-top: 1px;
	font-size: .78em;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--dcd-muted);
}
.dck-talen__naam { font: inherit; }
.dck-talen__naam .dck-naam-twee { font-size: .62em; margin-top: 2px; }