.fwb-location {
	position: fixed;
	z-index: var(--fwb-z-index, 99999);
	line-height: 1;
	--fwb-size: 56px;
	--fwb-offset-h: 20px;
	--fwb-offset-v: 20px;
}

.fwb-pos-top-left {
	top: var(--fwb-offset-v);
	left: var(--fwb-offset-h);
}

.fwb-pos-top-center {
	top: var(--fwb-offset-v);
	left: 50%;
	transform: translateX(-50%);
}

.fwb-pos-top-right {
	top: var(--fwb-offset-v);
	right: var(--fwb-offset-h);
}

.fwb-pos-middle-left {
	top: 50%;
	left: var(--fwb-offset-h);
	transform: translateY(-50%);
}

.fwb-pos-middle-right {
	top: 50%;
	right: var(--fwb-offset-h);
	transform: translateY(-50%);
}

.fwb-pos-bottom-left {
	bottom: var(--fwb-offset-v);
	left: var(--fwb-offset-h);
}

.fwb-pos-bottom-center {
	bottom: var(--fwb-offset-v);
	left: 50%;
	transform: translateX(-50%);
}

.fwb-pos-bottom-right {
	bottom: var(--fwb-offset-v);
	right: var(--fwb-offset-h);
}

.fwb-buttons-list {
	display: flex;
	gap: 12px;
}

.fwb-dir-vertical .fwb-buttons-list {
	flex-direction: column;
	align-items: center;
}

.fwb-dir-horizontal .fwb-buttons-list {
	flex-direction: row;
	align-items: center;
}

.fwb-button-wrap {
	position: relative;
	display: inline-flex;
}

.fwb-button {
	width: var(--fwb-size);
	height: var(--fwb-size);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--fwb-size) * 0.4);
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
	border: none;
}

.fwb-button:hover,
.fwb-button:focus {
	transform: scale(1.08);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	outline: none;
}

/* Vorm van de knop. */
.fwb-shape-circle .fwb-button {
	border-radius: 50%;
}

.fwb-shape-rounded .fwb-button {
	border-radius: calc(var(--fwb-size) * 0.22);
}

.fwb-shape-square .fwb-button {
	border-radius: 4px;
}

.fwb-btn-icon-img {
	width: calc(var(--fwb-size) * 0.5);
	height: calc(var(--fwb-size) * 0.5);
	object-fit: contain;
}

/* Helptekst (tooltip) in dezelfde stijl als de knop. */
.fwb-tooltip {
	position: absolute;
	white-space: nowrap;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	pointer-events: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.fwb-button-wrap:hover .fwb-tooltip,
.fwb-button-wrap:focus-within .fwb-tooltip {
	opacity: 1;
	visibility: visible;
}

/* Richting van de tooltip t.o.v. de knop, afhankelijk van de locatie. */
.fwb-pos-top-left .fwb-tooltip,
.fwb-pos-middle-left .fwb-tooltip,
.fwb-pos-bottom-left .fwb-tooltip {
	left: calc(100% + 12px);
	right: auto;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.fwb-pos-top-right .fwb-tooltip,
.fwb-pos-middle-right .fwb-tooltip,
.fwb-pos-bottom-right .fwb-tooltip {
	right: calc(100% + 12px);
	left: auto;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.fwb-pos-top-center.fwb-dir-vertical .fwb-tooltip,
.fwb-pos-bottom-center.fwb-dir-vertical .fwb-tooltip {
	left: calc(100% + 12px);
	right: auto;
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
}

.fwb-pos-top-center.fwb-dir-horizontal .fwb-tooltip {
	top: calc(100% + 12px);
	bottom: auto;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

.fwb-pos-bottom-center.fwb-dir-horizontal .fwb-tooltip {
	bottom: calc(100% + 12px);
	top: auto;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

@media (max-width: 600px) {
	.fwb-location {
		--fwb-size: min(var(--fwb-size), 48px);
		--fwb-offset-h: min(var(--fwb-offset-h), 10px);
		--fwb-offset-v: min(var(--fwb-offset-v), 10px);
	}

	.fwb-tooltip {
		display: none;
	}
}