/**
 * MS Free Shipping Bar - Styling
 *
 * Alle Werte liegen als Custom Properties auf dem Wrapper. Willst du Farben,
 * Hoehen oder Radien aendern, aendere sie hier oben - oder ueberschreibe sie im
 * Customizer/Theme, ohne mit !important arbeiten zu muessen:
 *
 *   .ms-fs-bar { --ms-fs-accent: #7c3aed; }
 */

.ms-fs-bar {
	--ms-fs-bg:        #f4f4f5;
	--ms-fs-text:      #27272a;
	--ms-fs-accent:    #2563eb;  /* Zustand "noch nicht erreicht" */
	--ms-fs-success:   #16a34a;  /* Zustand "erreicht"            */
	--ms-fs-track:     #e4e4e7;
	--ms-fs-radius:    999px;
	--ms-fs-height:    8px;      /* Hoehe des Fortschrittsbalkens */
	--ms-fs-min-height: 56px;    /* verhindert Layout-Shift, s. u. */

	box-sizing: border-box;
	background: var(--ms-fs-bg);
	color: var(--ms-fs-text);
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.4;

	/*
	 * Feste Mindesthoehe: Die Leiste wird nachtraeglich gefuellt (Fragments,
	 * Block-Store, Lazy-Fetch). Ohne reservierte Hoehe springt der Seiteninhalt
	 * in dem Moment nach unten.
	 */
	min-height: var(--ms-fs-min-height);
}

/* Kein Versand noetig, keine Gratisversand-Regel: Huelle bleibt im DOM
   (die Fragments brauchen sie), nimmt aber keinen Platz ein. */
.ms-fs-bar.is-empty {
	display: none;
}

.ms-fs-bar__inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 640px;
	margin: 0 auto;
}

.ms-fs-bar__text {
	margin: 0;
	text-align: center;
}

.ms-fs-bar__text strong {
	font-weight: 600;
	white-space: nowrap; /* "12,40 EUR" darf nicht umbrechen */
}

/* --- Fortschrittsbalken -----------------------------------------------
   Zwei Elemente statt <progress>: Das native Element rendert je nach Browser
   eigenwillig und laesst sich nur mit Herstellerpraefixen baendigen. */

.ms-fs-bar__track {
	position: relative;
	height: var(--ms-fs-height);
	background: var(--ms-fs-track);
	border-radius: var(--ms-fs-radius);
	overflow: hidden;
}

.ms-fs-bar__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ms-fs-accent);
	border-radius: var(--ms-fs-radius);

	/* Nur width und background animieren - beides guenstig genug fuer diese
	   Groesse. Alles Weitere (Schatten, Filter) waere hier Verschwendung. */
	transition: width .4s ease, background-color .3s ease;
}

/* --- Zustand "erreicht" ------------------------------------------------
   Der Farbwechsel transportiert die Botschaft schneller als der Text. */

.ms-fs-bar.is-reached {
	--ms-fs-bg: #f0fdf4;
	--ms-fs-text: #14532d;
}

.ms-fs-bar.is-reached .ms-fs-bar__fill {
	background: var(--ms-fs-success);
}

.ms-fs-bar.is-reached .ms-fs-bar__text::before {
	content: "\2713\00a0"; /* Haekchen + geschuetztes Leerzeichen */
	font-weight: 700;
}

/* --- Schwebende Variante (Footer-Ausgabe) ------------------------------
   Drei Positionen, umgeschaltet ueber MS_FS_POSITION in wp-config.php.
   Gemeinsam ist nur die Stapelreihenfolge und das sanfte Einblenden. */

.ms-fs-floating {
	/*
	 * Hoch genug, um vor Sticky-Headern zu liegen (die sitzen meist bei 100-999),
	 * niedrig genug, um Cookie-Banner und Consent-Layer (meist 99999+) nicht zu
	 * ueberdecken. Verschwindet die Karte trotzdem hinter deinem Header, ist
	 * dessen z-index hoeher - dann hier hochsetzen.
	 */
	z-index: 9990;

	/*
	 * Kurz verzoegertes Einblenden. Das ist kein Selbstzweck: Das JS setzt
	 * .is-dismissed erst beim DOMContentLoaded. Ohne diese Verzoegerung
	 * blitzte eine bereits weggeklickte Leiste bei jedem Seitenwechsel
	 * einen Frame lang auf. Faellt das JS aus, erscheint sie trotzdem.
	 */
	animation: ms-fs-in .25s .15s both;
}

@keyframes ms-fs-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Vom Kunden weggeklickt - gilt fuer die laufende Sitzung. */
.ms-fs-floating.is-dismissed {
	display: none;
}

/* Position 1: unten am Fenster.
   sticky statt fixed, damit die Leiste am Seitenende in den Fluss zurueckfaellt
   und den Footer nicht dauerhaft verdeckt. */
.ms-fs-floating--bottom {
	position: sticky;
	bottom: 0;
}

.ms-fs-floating--bottom .ms-fs-bar {
	border-top: 1px solid rgba( 0, 0, 0, .08 );
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, .06 );
}

/* Position 2: oben, unterhalb des Headers.
   --ms-fs-offset ist die Hoehe deines Sticky-Headers. Bei 0 klebt die Leiste
   ganz oben und schiebt sich vor den Header. */
.ms-fs-floating--top {
	position: fixed;
	top: var(--ms-fs-offset, 0px);
	left: 0;
	right: 0;
}

.ms-fs-floating--top .ms-fs-bar {
	border-bottom: 1px solid rgba( 0, 0, 0, .08 );
	box-shadow: 0 2px 12px rgba( 0, 0, 0, .06 );
}

/* Position 3: kleine Karte rechts, direkt unter dem Header.
   --ms-fs-offset wird vom JavaScript aus der gemessenen Header-Hoehe gesetzt.
   Willst du es selbst bestimmen, ueberschreib es hier oder im Customizer:
   .ms-fs-floating { --ms-fs-offset: 96px; } */
.ms-fs-floating--corner {
	position: fixed;
	top: calc( var(--ms-fs-offset, 0px) + 16px );
	right: 16px;
	width: min( 320px, calc( 100vw - 32px ) );
}

.ms-fs-floating--corner .ms-fs-bar {
	--ms-fs-min-height: 0;
	border: 1px solid rgba( 0, 0, 0, .08 );
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .12 );
	padding: 14px 36px 14px 16px; /* rechts Platz fuer das X */
}

.ms-fs-floating--corner .ms-fs-bar__text {
	text-align: left;
}

/* --- Schliessen-Button der Leiste -------------------------------------
   Sitzt in der aeusseren Huelle, damit ihn der Fragment-Austausch nicht
   mit wegwirft. */

.ms-fs-floating__close {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 2;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: inherit;
	opacity: .45;
	cursor: pointer;
}

.ms-fs-floating__close:hover,
.ms-fs-floating__close:focus-visible {
	opacity: 1;
}

/* Ist die Huelle leer (kein Versand noetig), soll auch das X verschwinden. */
.ms-fs-floating:has( .ms-fs-bar.is-empty ) {
	display: none;
}

/* --- Popup -------------------------------------------------------------
   position: fixed und Bewegung ueber transform/opacity. Niemals width oder
   height animieren, das erzwingt Layout-Neuberechnung und ruckelt. */

.ms-fs-popup {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	max-width: min( 360px, calc( 100vw - 40px ) );

	opacity: 0;
	transform: translateY( 12px );
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}

.ms-fs-popup.is-visible {
	opacity: 1;
	transform: translateY( 0 );
	pointer-events: auto;
}

.ms-fs-popup__box {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: #ffffff;
	color: #14532d;
	border: 1px solid #bbf7d0;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .12 );
}

.ms-fs-popup__icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #16a34a;
	color: #ffffff;
	font-size: 14px;
	line-height: 1;
}

.ms-fs-popup__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
}

.ms-fs-popup__close {
	margin-left: auto;
	background: none;
	border: 0;
	padding: 0 4px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: .5;
}

.ms-fs-popup__close:hover {
	opacity: 1;
}

/* --- Mobil -------------------------------------------------------------
   Popup auf volle Breite unten, damit es nicht mit dem Daumenbereich kollidiert. */

@media ( max-width: 600px ) {
	.ms-fs-popup {
		right: 12px;
		left: 12px;
		bottom: 12px;
		max-width: none;
	}

	.ms-fs-bar {
		font-size: 13px;
		padding: 10px 12px;
	}

	/* Die Eck-Karte bleibt auch auf dem Handy oben rechts unter dem Header.
	   Unten waere sie im Weg: dort sitzen App-Leisten, Cookie-Banner und der
	   Home-Indicator. Nur schmaler wird sie, damit sie nicht die halbe Seite
	   verdeckt. */
	.ms-fs-floating--corner {
		top: calc( var(--ms-fs-offset, 0px) + 10px );
		bottom: auto;
		left: auto;
		right: 10px;
		width: min( 260px, calc( 100vw - 20px ) );
	}

	.ms-fs-floating--corner .ms-fs-bar {
		padding: 10px 32px 10px 12px;
		font-size: 12px;
	}

	.ms-fs-floating--corner .ms-fs-bar__inner {
		gap: 6px;
	}
}

/* --- Barrierefreiheit --------------------------------------------------
   Wer Bewegung reduziert haben will, bekommt die Information trotzdem -
   nur ohne Gleiten und Wachsen. */

@media ( prefers-reduced-motion: reduce ) {
	.ms-fs-bar__fill,
	.ms-fs-popup {
		transition: opacity .15s linear;
	}

	.ms-fs-popup {
		transform: none;
	}
}