/* =========================================================
   LFS Image Service Label
   Label auf der Produktgalerie
   Varianten: KTW-BWGL + Kalkulator

   Wichtig:
   - Die native Snackys-Galerie wird NICHT verändert
   - Kein Eingriff in #gallery
   - Kein Lightbox-JS/CSS
   - Positionierung läuft über .lfs-gallery-wrap und .lfs-gallery-service-layer
========================================================= */
body.lfs-gallery-lightbox-active #product-offer.lfs-pdp-3plus .lfs-gallery-service-layer {
	display: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
#product-offer.lfs-pdp-3plus .lfs-gallery-wrap {
	position: relative;
}

#product-offer.lfs-pdp-3plus .lfs-gallery-service-layer {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 30;
	width: auto;
	max-width: calc(100% - 28px);
	pointer-events: none;
}

/* Service-Element innerhalb des Layers */
#product-offer.lfs-pdp-3plus .lfs-gallery-service-layer .lfs-image-service {
	position: static;
	width: auto;
	max-width: 100%;
	pointer-events: auto;
}

/* =========================================================
   Hover Animation: dezentes Wackeln
========================================================= */

@keyframes lfsImageServiceWiggle {
	0% {
		transform: translateX(0) rotate(0deg);
	}

	18% {
		transform: translateX(-1px) rotate(-0.7deg);
	}

	36% {
		transform: translateX(2px) rotate(0.7deg);
	}

	54% {
		transform: translateX(-1px) rotate(-0.4deg);
	}

	72% {
		transform: translateX(1px) rotate(0.4deg);
	}

	100% {
		transform: translateX(0) rotate(0deg);
	}
}

/* =========================================================
   Label Grunddesign
   Blau mit orangem Akzent links und Pfeilfläche rechts
========================================================= */

.lfs-image-service__label {
	position: relative;

	display: inline-flex;
	align-items: center;
	gap: 9px;

	min-height: 40px;
	padding: 8px 46px 8px 13px;

	border: 0;
	border-radius: 9px;

	background: linear-gradient(135deg, #2f57a6 0%, #244b96 100%);
	color: #ffffff;

	font-size: 13px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.01em;

	box-shadow: none !important;

	cursor: pointer;
	overflow: hidden;
	outline: none;

	transition:
		filter 0.18s ease,
		background 0.18s ease;
}

/* Orange Akzent links */
.lfs-image-service__label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;

	width: 6px;

	background: #f28c28;
	pointer-events: none;
}

/* Rechte Pfeil-Fläche */
.lfs-image-service__label::after {
	content: "›";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 34px;

	border-left: 1px solid rgba(255, 255, 255, 0.32);

	background: rgba(0, 0, 0, 0.10);
	color: #ffffff;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 25px;
	font-weight: 700;
	line-height: 1;

	padding-bottom: 2px;
	box-sizing: border-box;

	pointer-events: none;

	transition:
		background-color 0.18s ease,
		transform 0.18s ease;
}

/* Hover / Fokus */
.lfs-image-service__label:hover,
.lfs-image-service__label:focus {
	animation: lfsImageServiceWiggle 0.42s ease both;
	filter: brightness(1.07) saturate(1.05);
	outline: none;
	box-shadow: none !important;
}

.lfs-image-service__label:hover::after,
.lfs-image-service__label:focus::after {
	background: rgba(0, 0, 0, 0.16);
}

/* =========================================================
   Icon links
========================================================= */

.lfs-image-service__icon {
	position: relative;
	z-index: 1;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 22px;
	height: 22px;
	min-width: 22px;

	border-radius: 7px;

	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;

	font-size: 13px;
	font-weight: 900;
	font-style: normal;
	line-height: 1;

	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* =========================================================
   Text
========================================================= */

.lfs-image-service__text {
	position: relative;
	z-index: 1;

	color: #ffffff;

	white-space: nowrap;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
}

/* Falls aus altem TPL noch ein extra Pfeil-Span vorhanden ist */
.lfs-image-service__arrow {
	display: none !important;
}

/* =========================================================
   Variante: KTW-BWGL
========================================================= */

.lfs-image-service--ktw_bwgl .lfs-image-service__label {
	background: linear-gradient(135deg, #2f57a6 0%, #244b96 100%);
}

.lfs-image-service--ktw_bwgl .lfs-image-service__label::before {
	background: #f28c28;
}

/* =========================================================
   Variante: Kalkulator
========================================================= */

.lfs-image-service--kalkulator .lfs-image-service__label {
	background: linear-gradient(135deg, #2f57a6 0%, #244b96 100%);
}

.lfs-image-service--kalkulator .lfs-image-service__label::before {
	background: #f28c28;
}

/* =========================================================
   Modal Grundzustand
========================================================= */

.lfs-service-modal {
	display: none;
}

.lfs-service-modal.is-active {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.lfs-service-modal__backdrop {
	position: absolute;
	inset: 0;

	background: rgba(15, 23, 42, 0.62);
	backdrop-filter: blur(4px);
}

/* =========================================================
   Modal Dialog
========================================================= */

.lfs-service-modal__dialog {
	position: relative;
	top: 50%;

	width: min(680px, calc(100vw - 28px));
	max-height: calc(100vh - 40px);

	margin: 20px auto;
	padding: 24px;

	transform: translateY(-50%);

	background: #ffffff;

	border: 1px solid rgba(32, 51, 84, 0.12);
	border-radius: 18px;

	box-shadow: 0 26px 80px rgba(15, 23, 42, 0.28);

	overflow-y: auto;
}

/* =========================================================
   Modal Close Button
========================================================= */

.lfs-service-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border: 1px solid rgba(47, 87, 166, 0.14);
	border-radius: 50%;

	background: #f3f6fb;
	color: #24324a;

	font-size: 26px;
	font-weight: 400;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
}

.lfs-service-modal__close:hover,
.lfs-service-modal__close:focus {
	background: #2f57a6;
	border-color: #2f57a6;
	color: #ffffff;
	transform: rotate(90deg);
	outline: none;
}

/* =========================================================
   Modal Kopfbereich
========================================================= */

.lfs-service-modal__head {
	padding-right: 48px;
	margin-bottom: 18px;
}

.lfs-service-modal__eyebrow {
	margin-bottom: 5px;

	color: #2f57a6;

	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.lfs-service-modal__title {
	margin: 0;

	color: #172033;

	font-size: 24px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.lfs-service-modal__body {
	margin-top: 12px;
}

/* =========================================================
   Bestehende Boxen im Popup vollständig anzeigen
========================================================= */

.lfs-service-modal .ktw-trustbox,
.lfs-service-modal .lfs-servicebox {
	width: 100%;
	margin: 0;
}

.lfs-service-modal .ktw-trustbox__toggle,
.lfs-service-modal .lfs-servicebox__toggle {
	display: none !important;
}

.lfs-service-modal .ktw-trustbox__badge,
.lfs-service-modal .lfs-servicebox__badge {
	display: inline-flex !important;
}

.lfs-service-modal .ktw-trustbox__content,
.lfs-service-modal .lfs-servicebox__content {
	display: block !important;
	max-height: none !important;
	height: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	overflow: visible !important;
}

/* =========================================================
   Body Lock bei geöffnetem Service-Modal
========================================================= */

body.lfs-service-modal-open {
	overflow: hidden;
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 575.98px) {
	#product-offer.lfs-pdp-3plus .lfs-gallery-service-layer {
		left: 10px;
		bottom: 10px;
		max-width: calc(100% - 20px);
	}

	.lfs-image-service__label {
		min-height: 36px;
		padding: 8px 42px 8px 12px;
		border-radius: 8px;

		font-size: 12px;

		box-shadow: none !important;
	}

	.lfs-image-service__label::before {
		width: 5px;
	}

	.lfs-image-service__label::after {
		width: 31px;

		font-family: Arial, Helvetica, sans-serif;
		font-size: 23px;
		font-weight: 700;
		line-height: 1;

		padding-bottom: 2px;
		box-sizing: border-box;
	}

	.lfs-image-service__icon {
		width: 21px;
		height: 21px;
		min-width: 21px;

		border-radius: 6px;

		font-size: 13px;
	}

	.lfs-service-modal__dialog {
		width: calc(100vw - 20px);
		max-height: calc(100vh - 24px);

		margin: 12px auto;
		padding: 20px;

		border-radius: 16px;
	}

	.lfs-service-modal__head {
		padding-right: 44px;
		margin-bottom: 16px;
	}

	.lfs-service-modal__title {
		font-size: 21px;
	}

	.lfs-service-modal__close {
		top: 12px;
		right: 12px;

		width: 36px;
		height: 36px;

		font-size: 24px;
	}
}