/* SjaakBral — FluentCart winkelwagen-knop in de huisstijl, site-breed (de knop
 * zweeft op elke front-end pagina). Rond, groen met geel cart-icoon; wisselt naar
 * geel + groen icoon boven een groene sectie (.on-green door sb-cart.js), net als
 * de menu-knop. Kleuren direct per staat (var()-in-!important gaf resolutie-issues). */

.fct-cart-drawer-open-btn {
	/* De zwevende cart-knop staat standaard rechtsONDER. Op haags zetten we hem
	 * rechtsBOVEN, links náást de hamburger-knop: die staat op right:2em met een
	 * breedte van 3.5em, dus deze knop komt daar met een kleine tussenruimte
	 * links van (2 + 3.5 + 0.75em). z-index 499 (net onder de nav-laag van 500)
	 * zodat het open menupaneel de cart netjes overdekt, maar de knop bij een
	 * dicht menu boven de pagina-inhoud klikbaar blijft (de nav-laag zelf heeft
	 * pointer-events:none). Dezelfde admin-bar-correctie als de hamburger. */
	position: fixed !important;
	top: calc(2em + var(--wp-admin--admin-bar--height, 0px)) !important;
	right: 6.25em !important;
	bottom: auto !important;
	left: auto !important;
	z-index: 499 !important;
	width: 3.5em !important;
	height: 3.5em !important;
	border-radius: 50% !important;
	background-color: #1E7A54 !important;
	border: none !important;
	box-shadow: 0 8px 22px rgba(20, 60, 44, .28);
	transition: background-color .4s ease;
}
.fct-cart-drawer-open-btn.on-green {
	background-color: #E6C044 !important;
}

/* Mobiel: hamburger staat op right:1.25em, dus de cart schuift mee naar links. */
@media (max-width: 767px) {
	.fct-cart-drawer-open-btn {
		top: calc(1.25em + var(--wp-admin--admin-bar--height, 0px)) !important;
		right: 5.5em !important;
	}
}

/* Origineel donker SVG-icoontje verbergen, eigen gekleurd masker tonen. */
.fct-cart-drawer-open-btn img {
	opacity: 0 !important;
}
.fct-cart-drawer-open-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-mask: url("/wp-content/plugins/fluent-cart/assets/images/cart.svg") center / 44% no-repeat;
	mask: url("/wp-content/plugins/fluent-cart/assets/images/cart.svg") center / 44% no-repeat;
	background-color: #F7E87D;
	transition: background-color .4s ease;
	pointer-events: none;
}
.fct-cart-drawer-open-btn.on-green::after {
	background-color: #1E7A54;
}

/* Aantal-badge in de huisstijl (inverteert mee met de knop). */
.fct-cart-badge-count {
	background-color: #F7E87D !important;
	color: #1E7A54 !important;
	font-weight: 700 !important;
	border: none !important;
}
.fct-cart-drawer-open-btn.on-green .fct-cart-badge-count {
	background-color: #1E7A54 !important;
	color: #F7E87D !important;
}

/* ============================================================
 * Off-canvas winkelwagen (FluentCart mini-cart drawer) in de huisstijl:
 * groen paneel, witte teksten, gele prijzen + gele afrekenknop. Site-breed.
 * Hardcoded hex (net als hierboven): var() gaf resolutie-issues met !important.
 * ============================================================ */

.fct-cart-drawer {
	background-color: #1E7A54 !important;
	color: #FFFFFF !important;
	font-family: "Funnel Display", system-ui, sans-serif !important;
}
.fct-cart-drawer-content-wrapper,
.fct-cart-drawer-list,
.fct-cart-drawer-list-content {
	background: transparent !important;
}

/* Kop */
.fct-cart-drawer-header {
	background-color: #196845 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
	font-family: "Antonio", system-ui, sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: .01em;
}
.fct-cart-drawer-header,
.fct-cart-drawer-header * {
	color: #F7E87D !important;
}
.fct-cart-drawer-close-button {
	color: #F7E87D !important;
	background: transparent !important;
	border: none !important;
}
.fct-cart-drawer-close-button:hover {
	color: #FFFFFF !important;
}

/* Item-rijen */
.fct-cart-item {
	border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
	background: transparent !important;
}
.fct-cart-item-details,
.fct-cart-item-info {
	color: #FFFFFF !important;
}
/* Producttitels in het wit. */
.fct-cart-item-title,
.fct-cart-item-title *,
.fct-cart-item-title a {
	color: #FFFFFF !important;
	font-weight: 600 !important;
}
.fct-cart-item-variant,
.fct-cart-item-summary {
	color: rgba(255, 255, 255, .75) !important;
}
.fct-cart-item-price,
.fct-cart-item-total {
	color: #F7E87D !important;
	font-weight: 700 !important;
}
/* Ook de child-spans (o.a. "Eenheidsprijs: €14.95") in het geel. */
.fct-cart-item-price * {
	color: #F7E87D !important;
}
/* Productfoto: strak vierkant, geen crème-rand. De box mag NIET meerekken met de
 * rijhoogte (align-self) en heeft geen eigen achtergrond meer, zodat de ruimte
 * eromheen gewoon het groene paneel toont. */
.fct-cart-item-image {
	aspect-ratio: 1 / 1 !important;
	align-self: flex-start !important;
	height: auto !important;
	min-height: 0 !important;
	background: transparent !important;
	border-radius: 10px !important;
	overflow: hidden !important;
}
.fct-cart-item-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

/* Aantal-stepper (− 1 +) */
.fct-cart-item-quantity {
	background: rgba(255, 255, 255, .08) !important;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	border-radius: 8px !important;
	overflow: hidden;
}
.fct-cart-item-quantity .qty-btn {
	background: transparent !important;
	color: #F7E87D !important;
	border: none !important;
}
.fct-cart-item-quantity .qty-btn:hover {
	background: rgba(255, 255, 255, .14) !important;
	color: #FFFFFF !important;
}
.fct-cart-item-quantity input,
.fct-cart-item-quantity span {
	color: #F7E87D !important;
	background: transparent !important;
	font-weight: 700 !important;
}

/* Verwijderknop (prullenbak) */
.fct-cart-item-delete-button {
	color: #F7E87D !important;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	border-radius: 8px !important;
}
.fct-cart-item-delete-button:hover {
	color: #FFFFFF !important;
	background: rgba(255, 255, 255, .14) !important;
}

/* Voettekst: totaal + afrekenknop */
.fct-cart-drawer-footer {
	background-color: #196845 !important;
	border-top: 1px solid rgba(255, 255, 255, .12) !important;
}
/* Vlak achter de afrekenknop óók groen, zodat de gele knop er meer uitkomt. */
.fct-cart-drawer-footer-actions {
	background-color: #196845 !important;
}
.fct-cart-total-wrapper {
	color: #FFFFFF !important;
	font-family: "Antonio", system-ui, sans-serif !important;
	text-transform: uppercase;
}
.fct-cart-total-wrapper span:last-child {
	color: #F7E87D !important;
}

/* Afrekenknop: geel met groene tekst, zoals de "Bestellen"-knoppen. */
.fct-cart-drawer-footer-actions .checkout-button,
.fct-cart-drawer-footer-actions a,
.fct-cart-drawer-footer-actions button {
	background-color: #F7E87D !important;
	color: #1E7A54 !important;
	border: none !important;
	font-family: "Antonio", system-ui, sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .02em;
	border-radius: 10px !important;
	transition: background-color .2s ease;
}
.fct-cart-drawer-footer-actions .checkout-button:hover,
.fct-cart-drawer-footer-actions a:hover,
.fct-cart-drawer-footer-actions button:hover {
	background-color: #E6C044 !important;
}