/* J-Mobile Image Badges - overlay styling
   De badge + logo worden als overlay over de afbeelding gelegd.
   Originele afbeeldingen blijven volledig ongewijzigd. */

.jmib-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
	max-width: 100%;
}

.jmib-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---- Algemene positionering ---- */
.jmib-logo,
.jmib-badge {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	line-height: 0;
}

.jmib-top-left    { top: 4%;    left: 4%;   }
.jmib-top-right   { top: 4%;    right: 4%;  }
.jmib-bottom-left { bottom: 4%; left: 4%;   }
.jmib-bottom-right{ bottom: 4%; right: 4%;  }
.jmib-center      { top: 50%;   left: 50%; transform: translate(-50%, -50%); }

/* ---- Logo miniatuur ---- */
.jmib-logo {
	width: var(--jmib-logo-size, 22%);
	aspect-ratio: 458 / 102;            /* verhouding van het originele logo */
	background-image: var(--jmib-logo-url);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	/* lichte achtergrond zodat het donkerblauwe logo ook op donkere foto's leesbaar blijft */
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 8px;
	padding: 1.2% 2%;
	box-sizing: border-box;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ---- Garantie badge ---- */
.jmib-badge {
	width: var(--jmib-badge-size, 26%);
}

.jmib-badge-svg {
	width: 100%;
	height: auto;
	display: block;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

/* Responsief: iets groter op kleine schermen voor leesbaarheid */
@media (max-width: 480px) {
	.jmib-logo  { width: calc(var(--jmib-logo-size, 22%) + 6%); }
	.jmib-badge { width: calc(var(--jmib-badge-size, 26%) + 6%); }
}