/* Kloosterbeleving mobiele winkelwagen-balk.
 * Vaste balk onderaan, alleen zichtbaar op smartphone-formaat (max-width 767px)
 * en alleen als de mand artikelen bevat (.kb-mc-visible, gezet door het JS).
 * Huisstijl: teal var(--hoofdkleur-1) #195b6f, cream tekst. */

#kb-mobile-cart-bar {
	/* Standaard verborgen: op desktop/tablet nooit tonen. */
	display: none;
}

@media ( max-width: 767px ) {
	#kb-mobile-cart-bar.kb-mc-visible {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		align-items: center;
		gap: 0.6em;
		box-sizing: border-box;
		width: 100%;
		padding: 0.85em 1.1em;
		/* Ruimte voor de iOS/Android-onderbalk (notch / home-indicator). */
		padding-bottom: calc( 0.85em + env( safe-area-inset-bottom, 0px ) );
		background: var( --hoofdkleur-1, #195b6f );
		color: #f5efe7;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		box-shadow: 0 -3px 14px rgba( 0, 0, 0, 0.18 );
	}

	#kb-mobile-cart-bar .kb-mc-icon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		color: #f5efe7;
	}

	#kb-mobile-cart-bar .kb-mc-icon svg {
		display: block;
	}

	#kb-mobile-cart-bar .kb-mc-count {
		position: absolute;
		top: -8px;
		right: -10px;
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		box-sizing: border-box;
		border-radius: 9px;
		background: #c8941f;
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		line-height: 18px;
		text-align: center;
	}

	#kb-mobile-cart-bar .kb-mc-label {
		flex: 1 1 auto;
		text-align: left;
		color: #f5efe7;
	}

	#kb-mobile-cart-bar .kb-mc-arrow {
		flex: 0 0 auto;
		font-size: 18px;
		color: #f5efe7;
	}

	#kb-mobile-cart-bar.kb-mc-visible:hover,
	#kb-mobile-cart-bar.kb-mc-visible:focus {
		color: #ffffff;
		text-decoration: none;
	}
}