/* =========================================================================
 *  Handystairs Picqer - levertijdblok
 *
 *  Het blok krijgt bewust ook de themaklassen .hps-stock-delivery /
 *  .hps-sd__icon / .hps-sd__stock / .hps-sd__eta mee, zodat het op de
 *  productpagina exact in de bestaande opmaak past (themes/arkdesign/css/
 *  product-page.css). Die themastylesheet wordt echter alleen op is_product()
 *  geladen, terwijl de shortcode overal aanroepbaar is - daarom herhaalt dit
 *  bestand de basis-layout, zodat het blok ook los altijd goed staat.
 * ========================================================================= */

.hspq-levertijd {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 6px 0 4px;
	font-size: 16px;
	line-height: 1.4;
	color: #6b7280;
}

.hspq-levertijd .hspq-levertijd__icon {
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
	color: #3caf66; /* merkgroen, wordt per state overschreven */
}

.hspq-levertijd .hspq-levertijd__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.01em;
	white-space: nowrap;
	background: #f1f3f5;
	color: #1d1d1b;
}

.hspq-levertijd .hspq-levertijd__text {
	flex-basis: 100%; /* levertijdtekst op een eigen regel onder de badge */
	color: #6b7280;
	font-size: 15px;
	line-height: 1.45;
}

.hspq-levertijd .hspq-levertijd__text strong,
.hspq-levertijd .hspq-levertijd__text b {
	color: #1d1d1b;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 *  States
 *  instock = groen, eta/acf = oranje (verwacht), unknown = neutraal grijs.
 *
 *  LET OP - de dubbele klasse (.hspq-levertijd.hspq-levertijd--x) is bewust:
 *  het blok draagt ook .hps-stock-delivery, en de themaregels
 *  ".hps-stock-delivery .hps-sd__icon { color: #3caf66 }" /
 *  ".hps-stock-delivery .hps-sd__stock { color: #1d1d1b }" hebben dezelfde
 *  specificiteit (0,2,0) maar worden later ingeladen (plugins enqueuen voor
 *  het thema). Zonder de extra klasse zou de "verwacht"-state alsnog groen
 *  kleuren. Met 0,3,0 winnen deze regels ongeacht de volgorde.
 * ---------------------------------------------------------------------- */

/* Op voorraad - groen */
.hspq-levertijd.hspq-levertijd--instock .hspq-levertijd__icon {
	color: #3caf66;
}
.hspq-levertijd.hspq-levertijd--instock .hspq-levertijd__badge {
	background: #e8f7ee;
	color: #1f7a44;
}

/* Verwacht via inkooporder (Picqer ETA) - oranje */
.hspq-levertijd.hspq-levertijd--eta .hspq-levertijd__icon {
	color: #e08600;
}
.hspq-levertijd.hspq-levertijd--eta .hspq-levertijd__badge {
	background: #fff3e0;
	color: #9a5b00;
}

/* ACF-fallback (levertijd_optie) - zelfde oranje familie, iets zachter */
.hspq-levertijd.hspq-levertijd--acf .hspq-levertijd__icon {
	color: #e08600;
}
.hspq-levertijd.hspq-levertijd--acf .hspq-levertijd__badge {
	background: #fff8ed;
	color: #9a5b00;
}

/* Geen enkele bron - neutraal, geen valse belofte */
.hspq-levertijd.hspq-levertijd--unknown .hspq-levertijd__icon {
	color: #9199a3;
}
.hspq-levertijd.hspq-levertijd--unknown .hspq-levertijd__badge {
	background: #f1f3f5;
	color: #4b5563;
}

/* -------------------------------------------------------------------------
 *  Variantwissel: korte fade zodat de tekst niet "knippert".
 * ---------------------------------------------------------------------- */
.hspq-levertijd {
	transition: opacity 0.12s ease-in-out;
}
.hspq-levertijd--updating {
	opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
	.hspq-levertijd {
		transition: none;
	}
	.hspq-levertijd--updating {
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------
 *  Compacte varianten (bv. in een lijst of onder een variantselector).
 * ---------------------------------------------------------------------- */
.hspq-levertijd.hspq-levertijd--compact {
	gap: 4px 8px;
	margin: 4px 0;
	font-size: 14px;
}
.hspq-levertijd.hspq-levertijd--compact .hspq-levertijd__icon {
	font-size: 16px;
}
.hspq-levertijd.hspq-levertijd--compact .hspq-levertijd__badge {
	font-size: 12.5px;
	padding: 1px 8px;
}
.hspq-levertijd.hspq-levertijd--compact .hspq-levertijd__text {
	font-size: 13.5px;
}

/* Inline variant: alles op een regel (bv. in de winkelwagen of een tabel). */
.hspq-levertijd.hspq-levertijd--inline .hspq-levertijd__text {
	flex-basis: auto;
}

@media (max-width: 575.98px) {
	.hspq-levertijd {
		font-size: 15px;
	}
	.hspq-levertijd .hspq-levertijd__text {
		font-size: 14px;
	}
}