/* MBYM Widgets */

/* Niet op de themastijl vertrouwen voor verborgen labels. */
.mbym-w-stack .screen-reader-text,.mbym-w-standalone .screen-reader-text{
	position:absolute!important;width:1px;height:1px;
	margin:-1px;padding:0;overflow:hidden;white-space:nowrap;
	clip:rect(0 0 0 0);clip-path:inset(50%);border:0;
}

.mbym-w-stack{
	position:fixed;
	bottom:var(--mbym-w-y,20px);
	z-index:9990;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:10px;
	font:400 14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.mbym-w-right{right:var(--mbym-w-x,20px)}
.mbym-w-left{left:var(--mbym-w-x,20px);align-items:flex-start}

@media (max-width:782px){
	.mbym-w-desktop-only{display:none}
}

.mbym-w-item{
	display:inline-flex;
	align-items:center;
	gap:8px;
	border:0;
	cursor:pointer;
	text-decoration:none;
	box-shadow:0 2px 6px rgba(0,0,0,.14),0 8px 24px rgba(0,0,0,.10);
	transition:transform .18s ease,box-shadow .18s ease;
}
.mbym-w-item:hover,.mbym-w-item:focus-visible{
	transform:translateY(-2px);
	box-shadow:0 4px 10px rgba(0,0,0,.16),0 12px 30px rgba(0,0,0,.13);
}
.mbym-w-item:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- Google-beoordelingen ---------- */

.mbym-w-rating{
	flex-direction:column;
	align-items:flex-start;
	gap:2px;
	background:#fff;
	color:#1f2328;
	padding:9px 14px;
	border-radius:10px;
}
.mbym-w-rating-top{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:11.5px;
	letter-spacing:.01em;
	color:#5f6b76;
}
.mbym-w-google-logo{height:14px;width:auto;display:block}
.mbym-w-google-word{font-weight:600;color:#3c4043;letter-spacing:-.01em}
.mbym-w-rating-bottom{display:flex;align-items:center;gap:6px}
.mbym-w-score{font-size:17px;font-weight:700;line-height:1;color:#1f2328}
.mbym-w-count{font-size:11.5px;color:#6b7681}

.mbym-w-stars{position:relative;display:inline-block;line-height:0;white-space:nowrap}
.mbym-w-stars svg{width:14px;height:13.3px;display:inline-block}
.mbym-w-stars-empty svg{fill:#dadde1}
.mbym-w-stars-full{position:absolute;inset:0;overflow:hidden;white-space:nowrap}
.mbym-w-stars-full svg{fill:#f4b400}

/* ---------- WhatsApp ---------- */

/* Afmetingen op het element zelf en hier nog eens vastgezet: een geupload
   icoon mag nooit op ware grootte doorbreken, wat het thema ook probeert. */
.mbym-w-stack img,.mbym-w-standalone img{max-width:100%;height:auto}
.mbym-w-wa-icon{
	width:28px!important;height:28px!important;
	flex:0 0 auto;display:block;fill:currentColor;object-fit:contain;
}
.mbym-w-wa-send-icon{width:20px!important;height:20px!important;fill:currentColor;flex:0 0 auto}
.mbym-w-wa-avatar-img{width:40px!important;height:40px!important;border-radius:50%;object-fit:cover;display:block}

.mbym-w-wa{position:relative;display:flex;flex-direction:column;align-items:inherit;z-index:1}

.mbym-w-wa-launcher{
	width:58px;height:58px;
	border-radius:50%;
	background:var(--mbym-w-wa,#25D366);
	color:#fff;
	justify-content:center;
	padding:0;
}

/* ----- het paneel ----- */

.mbym-w-wa-panel{
	position:absolute;
	bottom:calc(100% + 12px);
	width:min(330px,calc(100vw - 40px));
	background:#fff;
	border-radius:14px;
	overflow:hidden;
	box-shadow:0 6px 18px rgba(0,0,0,.16),0 20px 48px rgba(0,0,0,.16);
	animation:mbym-w-pop .22s ease;
	text-align:left;
}
.mbym-w-right .mbym-w-wa-panel{right:0}
.mbym-w-left  .mbym-w-wa-panel{left:0}

@keyframes mbym-w-pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.mbym-w-wa-head{
	display:flex;align-items:center;gap:11px;
	padding:13px 14px;
	background:var(--mbym-w-wa-head,#075E54);
	color:#fff;
}
.mbym-w-wa-avatar{position:relative;flex:0 0 auto;line-height:0}
.mbym-w-wa-avatar-fallback{
	display:flex;align-items:center;justify-content:center;
	background:rgba(255,255,255,.22);color:#fff;
	font-size:17px;font-weight:600;line-height:1;
}
.mbym-w-wa-dot{
	position:absolute;right:0;bottom:0;
	width:11px;height:11px;border-radius:50%;
	background:#4ade80;border:2px solid var(--mbym-w-wa-head,#075E54);
}
.mbym-w-wa-who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.mbym-w-wa-who strong{font-size:14.5px;font-weight:600;line-height:1.2}
.mbym-w-wa-who small{font-size:11.5px;opacity:.78;line-height:1.25}
.mbym-w-wa-close{
	border:0;background:none;color:#fff;opacity:.75;
	font-size:22px;line-height:1;cursor:pointer;padding:0 2px;flex:0 0 auto;
}
.mbym-w-wa-close:hover{opacity:1}

.mbym-w-wa-body{
	padding:18px 14px;
	background:#ece5dd;
	background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);
	background-size:14px 14px;
	max-height:260px;overflow-y:auto;
}
.mbym-w-wa-msg{
	position:relative;
	background:#fff;
	border-radius:0 10px 10px 10px;
	padding:10px 12px 16px;
	font-size:13.5px;line-height:1.5;color:#1f2328;
	box-shadow:0 1px 1px rgba(0,0,0,.09);
	max-width:88%;
}
.mbym-w-wa-msg::before{
	content:"";position:absolute;top:0;left:-7px;
	border:7px solid transparent;border-top-color:#fff;border-right:0;
}
.mbym-w-wa-time{
	position:absolute;right:9px;bottom:5px;
	font-size:10.5px;color:#8d949b;
}

.mbym-w-wa-foot{padding:10px;background:#fff;border-top:1px solid #eceef0}
.mbym-w-wa-text{
	width:100%;box-sizing:border-box;
	border:1px solid #dfe3e6;border-radius:9px;
	padding:9px 11px;margin:0 0 8px;
	font:inherit;font-size:13.5px;line-height:1.45;color:#1f2328;
	resize:none;max-height:110px;background:#fff;
}
.mbym-w-wa-text:focus{outline:0;border-color:var(--mbym-w-wa,#25D366)}
.mbym-w-wa-send{
	display:flex;align-items:center;justify-content:center;gap:8px;
	width:100%;box-sizing:border-box;
	background:var(--mbym-w-wa,#25D366);color:#fff;
	border-radius:999px;padding:11px 16px;
	font-size:14px;font-weight:600;text-decoration:none;
	transition:filter .18s ease;
}
.mbym-w-wa-send:hover,.mbym-w-wa-send:focus-visible{filter:brightness(.94);color:#fff}

/* ----- eenvoudige knop voor in de pagina ----- */

.mbym-w-wa-inline{
	background:var(--mbym-w-wa,#25D366);color:#fff;
	border-radius:999px;padding:11px 18px 11px 14px;font-weight:600;
}

/* ---------- Achtergrondmuziek ---------- */

.mbym-w-music{
	width:46px;height:46px;
	border-radius:50%;
	background:#1f2328;
	color:#fff;
	justify-content:center;
	padding:0;
	/* Een lichte rand zodat de knop ook op een donkere pagina zichtbaar blijft. */
	box-shadow:0 0 0 1px rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.14);
}
.mbym-w-music-icon{display:flex;align-items:flex-end;gap:2.5px;height:16px}
.mbym-w-music-icon i{
	display:block;width:2.5px;border-radius:2px;background:currentColor;
}
/* Ongelijke hoogtes, zodat het in rust al als geluid leest en niet als puntjes. */
.mbym-w-music-icon i:nth-child(1){height:7px}
.mbym-w-music-icon i:nth-child(2){height:14px}
.mbym-w-music-icon i:nth-child(3){height:10px}
.mbym-w-music-icon i:nth-child(4){height:16px}
.mbym-w-music[aria-pressed="true"] .mbym-w-music-icon i{
	animation:mbym-w-eq .9s ease-in-out infinite;
}
.mbym-w-music-icon i:nth-child(2){animation-delay:.15s}
.mbym-w-music-icon i:nth-child(3){animation-delay:.3s}
.mbym-w-music-icon i:nth-child(4){animation-delay:.45s}
@keyframes mbym-w-eq{0%,100%{height:5px}50%{height:16px}}
.mbym-w-music[aria-pressed="true"] .mbym-w-music-icon i{height:5px}

/* ---------- In de pagina ---------- */

.mbym-w-standalone{
	display:inline-block;
	font:400 14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.mbym-w-inline{box-shadow:0 1px 3px rgba(0,0,0,.10)}
.mbym-w-inline.mbym-w-rating{border:1px solid #e6e9ec}

@media (prefers-reduced-motion:reduce){
	.mbym-w-item,.mbym-w-wa-panel{transition:none;animation:none}
	.mbym-w-item:hover{transform:none}
	.mbym-w-music[aria-pressed="true"] .mbym-w-music-icon i{animation:none;height:11px}
}
