/*
 * AW Cart & Checkout (AWCC) in de WoodXL-huisstijl.
 * De plugin-CSS laadt NA de modules (prio 999) → overrides met extra specificiteit (html …) en waar de
 * plugin zelf !important gebruikt ook !important. Kleuren via Elementor-globals.
 */

/* ---------- Variabelen van de one-page/accordion-checkout ---------- */
html .awcc-accordion {
	--awcc-ink: var(--e-global-color-secondary);
	--awcc-ink-soft: var(--e-global-color-text);
	--awcc-line: var(--e-global-color-wxlgray2);
	--awcc-brand: var(--e-global-color-accent);
	--awcc-brand-soft: var(--e-global-color-wxlorlt);
	--awcc-cta: var(--e-global-color-primary);
	--awcc-cta-hover: var(--e-global-color-accent);
	--awcc-ok: var(--e-global-color-wxlgreen);
	--awcc-field-line: var(--e-global-color-wxlgray3);
	--awcc-readonly: var(--e-global-color-wxlcream);
	--awcc-focus: var(--e-global-color-wxlorsoft);
}

/* Bedankpagina */
html .awcc-ty {
	--awty-accent: var(--e-global-color-accent);
	--awty-accent-bright: var(--e-global-color-primary);
	--awty-ok: var(--e-global-color-primary); /* oranje i.p.v. groen (vinkje, stappen, iconen) */
	--awty-ok-soft: var(--e-global-color-wxlorlt, #fff0e6);
}

/* ---------- Vaste plugin-kleuren (niet via variabelen) ---------- */
html .awcc-topbar-logo a {
	color: var(--e-global-color-secondary);
}

html .awcc-topbar-secure,
html .awcc-pc-status.is-ok,
html .woocommerce-checkout .awcc-woocommerce-checkout-payment .awcc-coupon-notice {
	color: var(--e-global-color-wxlgreen);
}

html .awcc-pc-dd-item:hover,
html .awcc-pc-dd-item:focus {
	background: var(--e-global-color-wxlorlt);
}

/* Accordion: open blok, stapnummers, bestelknop */
html .awcc-accordion {
	.awcc-block.is-open {
		border-color: var(--e-global-color-primary) !important;
		box-shadow: 0 0 0 1px var(--e-global-color-primary), 0 8px 22px rgb(71 40 10 / 8%) !important;
	}

	.awcc-block-no {
		color: var(--e-global-color-primary) !important;
	}

	.awcc-block.is-done .awcc-block-no {
		background: var(--e-global-color-wxlgreen) !important;
		color: var(--e-global-color-wxlwhite) !important;
	}

	.awcc-block--payment .awcc-place-order-btn {
		background: var(--e-global-color-primary) !important;

		&:hover {
			background: var(--e-global-color-accent) !important;
		}
	}

	/* Betaalmethodes */
	.awcc-block--payment .wc_payment_methods li {
		&:hover {
			border-color: var(--e-global-color-wxlorsoft) !important;
		}

		input[type="radio"] {
			accent-color: var(--e-global-color-primary);
		}

		&:has(input:checked) {
			border-color: var(--e-global-color-primary) !important;
			box-shadow: inset 0 0 0 1px var(--e-global-color-primary);
			background: var(--e-global-color-wxlorlt);
		}
	}

	.awcc-block--payment .payment_box {
		background: var(--e-global-color-wxlcream) !important;
	}

	/* Waardebon-knop */
	.awcc-block--payment .awcc-checkout-coupon .awcc-coupon-wrapper > button {
		color: var(--e-global-color-accent) !important;

		&:hover {
			background: var(--e-global-color-primary) !important;
			border-color: var(--e-global-color-primary) !important;
			color: var(--e-global-color-wxlwhite) !important;
		}
	}

	.woocommerce-form-login.awcc-login-inline {
		background: var(--e-global-color-wxlcream);
	}
}

/* ---------- Winkelwagen ---------- */
html body.woocommerce-cart {
	.btn,
	button,
	.btn-primary,
	.button {
		border-color: var(--e-global-color-primary);
		background-color: var(--e-global-color-primary);
		color: var(--e-global-color-wxlwhite);

		&:hover {
			border-color: var(--e-global-color-accent);
			background-color: var(--e-global-color-accent);
			color: var(--e-global-color-wxlwhite);
		}
	}

	.cart-totals-container .order-total {
		background-color: var(--e-global-color-wxlorlt);
	}
}

/* ---------- Checkout (multi-step-variant, mocht die ooit aangezet worden) ---------- */
html body.woocommerce-checkout {
	.btn,
	button,
	.btn-primary {
		border-color: var(--e-global-color-primary) !important;
		background-color: var(--e-global-color-primary) !important;

		&:hover {
			border-color: var(--e-global-color-accent) !important;
			background-color: var(--e-global-color-accent) !important;
			color: var(--e-global-color-wxlwhite) !important;
		}
	}

	.awcc-step.completed {
		background: var(--e-global-color-wxlgreen);
	}
}

/* ---------- Pagina-opbouw winkelwagen/afrekenen (thema-pagina, geen Elementor) ---------- */
html body.woocommerce-cart,
html body.woocommerce-checkout:not(.woocommerce-order-received) {
	background: var(--e-global-color-wxlcream);

	main.site-main {
		width: 100%;
		max-width: 1240px;
		margin: 0 auto;
		padding: 28px 28px 64px;
	}

	.page-header {
		padding: 0 12px;

		.entry-title {
			margin: 0 0 20px;
			font-family: var(--e-global-typography-wxlh1page-font-family), sans-serif;
			font-size: 34px;
			font-weight: 700;
			line-height: 1.1;
			text-transform: uppercase;
			color: var(--e-global-color-secondary);
		}
	}
}

/* Invoervelden in normale hoogte (kit-formulierstijl maakte ze ~90px hoog) */
html body.woocommerce-cart .woocommerce-cart-form input.input-text,
html body.woocommerce-cart .woocommerce-cart-form input.qty {
	height: 44px;
	min-height: 0;
	padding: 8px 14px;
	border: 1.5px solid var(--e-global-color-wxlgray2);
	border-radius: 8px;
	background: var(--e-global-color-wxlwhite);
	font-size: 15px;
	line-height: 1.2;
}

html body.woocommerce-cart .woocommerce-cart-form input.qty {
	width: 64px;
	padding: 8px;
	text-align: center;
}

/* Waardebon-knop: secundaire stijl (wit met rand), bestelknop blijft oranje */
html body.woocommerce-cart .woocommerce-cart-form .coupon button.button {
	height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--e-global-color-wxlgray3);
	border-radius: 6px;
	background: var(--e-global-color-wxlwhite);
	font-family: var(--e-global-typography-wxlbtnsm-font-family), sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--e-global-color-wxlbrown);

	&:hover {
		border-color: var(--e-global-color-primary);
		background: var(--e-global-color-wxlwhite);
		color: var(--e-global-color-accent);
	}
}

@media (max-width: 767px) {
	html body.woocommerce-cart,
	html body.woocommerce-checkout:not(.woocommerce-order-received) {
		main.site-main {
			padding: 16px 16px 40px;
		}

		.page-header {
			padding: 0;

			.entry-title {
				margin-bottom: 14px;
				font-size: 24px;
			}
		}
	}
}

/* ---------- Checkout-topbalk: WoodXL-woordmerk (zie functions.php) ---------- */
html .awcc-topbar-logo .wxl-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-family: var(--e-global-typography-wxllogo-font-family), sans-serif;
	font-size: 25px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: var(--e-global-color-secondary);

	span {
		padding: 2px 8px;
		border-radius: 5px;
		background: var(--e-global-color-primary);
		color: var(--e-global-color-wxlwhite);
	}
}

html body.woocommerce-checkout:not(.woocommerce-order-received) .page-header {
	padding: 0;
}

@media (max-width: 767px) {
	html .awcc-topbar-logo .wxl-wordmark {
		font-size: 19px;
	}
}

/* ---------- Winkelwagen-zijpaneel (Elementor Menu Cart met AWCC mini-cart) ---------- */
/* Boven de sticky header: alle headercontainers hebben z-index 100 en de categoriebalk komt later in de DOM.
   Zolang het paneel open is, de containers rond de winkelwagen omhoog tillen. */
html .elementor-menu-cart__container {
	z-index: 100000;
}

html .e-con:has(.elementor-menu-cart--shown) {
	z-index: 100001 !important;
}

html .elementor-menu-cart__main {
	.elementor-menu-cart__product-name a,
	.product-name a {
		color: var(--e-global-color-secondary);
		font-weight: 700;
		text-decoration: none;
	}

	.variation,
	dl.variation {
		margin: 4px 0;
		padding-left: 10px;
		border-left: 2px solid var(--e-global-color-wxlgray2);
		font-size: 13px;
		color: var(--e-global-color-text);
	}

	.elementor-menu-cart__product-remove,
	.remove_from_cart_button {
		color: var(--e-global-color-wxltaupel) !important;
	}

	.elementor-menu-cart__subtotal {
		font-family: var(--e-global-typography-primary-font-family), sans-serif;
		color: var(--e-global-color-secondary);
	}

	/* Knoppen even hoog, tekst op één regel */
	.elementor-menu-cart__footer-buttons .elementor-button {
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
	}

	.elementor-menu-cart__footer-buttons .elementor-button,
	.woocommerce-mini-cart__buttons .button {
		padding: 13px 12px;
		font-size: 12.5px !important;
		border: 1.5px solid var(--e-global-color-wxlgray3);
		border-radius: 6px;
		background: var(--e-global-color-wxlwhite);
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-size: 13px;
		font-weight: 600;
		text-transform: uppercase;
		color: var(--e-global-color-wxlbrown);

		&:hover {
			border-color: var(--e-global-color-primary);
			color: var(--e-global-color-accent);
		}

		&.elementor-button--checkout,
		&.checkout {
			border-color: var(--e-global-color-primary);
			background: var(--e-global-color-primary);
			color: var(--e-global-color-wxlwhite);

			&:hover {
				border-color: var(--e-global-color-accent);
				background: var(--e-global-color-accent);
				color: var(--e-global-color-wxlwhite);
			}
		}
	}
}

/* Productgegevens onder de naam in "Je bestelling" (one-page, zie functions.php) */
html .awcc-item-name .wxl-item-meta {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	color: var(--e-global-color-text);
}

/* Checkout-topbalk: sitelogo (SVG, Site-identiteit) op ontwerpformaat.
   AWCC zet .awcc-checkout-topbar .awcc-topbar-logo img op 34px hoog (!important); SVG heeft een vaste hoogte nodig. */
html body .awcc-checkout-topbar .awcc-topbar-logo img.custom-logo {
	width: auto !important;
	height: 49px !important;
	max-width: none !important;
	max-height: none !important;
}

@media (max-width: 767px) {
	html body .awcc-checkout-topbar .awcc-topbar-logo img.custom-logo {
		height: 37px !important;
	}
}

/* Uitschuifwinkelwagen: productgegevens (Lengte / Retour) compacter onder elkaar */
.elementor-menu-cart__product-name dl.variation {
	display: block; /* kopje en waarde onder elkaar i.p.v. Elementor-grid naast elkaar */
	line-height: 1.45;

	dd {
		margin-left: 0 !important;
	}

	dd + dt {
		margin-top: 6px;
	}

	dt,
	dd,
	dd p {
		line-height: 1.45;
	}

	dd {
		margin-bottom: 0;
	}
}

/* Afrekenpagina (one-page): even breed als de rest van de site (1184px content) i.p.v. AWCC's 1040px.
   Stappen nemen de resterende ruimte, besteloverzicht blijft 380px. */
html body .awcc-acc-cols {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	grid-template-columns: minmax(0, 1fr) 380px !important;
}
@media (max-width: 900px) { /* zelfde breakpoint als AWCC: één kolom */
	html body .awcc-acc-cols {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Afrekenpagina bovenbalk: logo en 'Veilig afrekenen' op dezelfde 1184px-lijn als de inhoud (zelfde maat als main: 1240 incl. 28px padding) */
html body .awcc-checkout-topbar-inner {
	max-width: 1240px !important;
	padding-left: 28px !important;
	padding-right: 28px !important;
}
@media (max-width: 767px) {
	html body .awcc-checkout-topbar-inner {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* Besteloverzicht checkout: 'Artikelen (N)' is een knop → kit-knophover (oranje vlak + zwarte rand) uitzetten */
html body .awcc-accordion .awcc-items-toggle,
html body .awcc-accordion .awcc-items-toggle:hover,
html body .awcc-accordion .awcc-items-toggle:focus,
html body .awcc-accordion .awcc-items-toggle:active {
	background: none !important;
	color: var(--awcc-ink) !important;
	border: none !important;
	border-bottom: 1px solid var(--awcc-line) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	transform: none !important;
}

/* Stap Bezorgmethode verborgen als er automatisch één verzendmethode gekozen is (script in functions.php) */
html body .awcc-accordion .awcc-block--shipping.wxl-ship-auto {
	display: none !important;
}

/* Winkelwagen: 'Doorgaan naar afrekenen' in de knoplook van de site (Oswald, bold, hoofdletters) */
html body .wc-proceed-to-checkout a.checkout-button,
html body .wc-proceed-to-checkout .btn.btn-primary {
	font-family: var(--e-global-typography-accent-font-family, 'Oswald'), sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
}

/* ---------- Bedankpagina: opbouw ---------- */
/* Zelfde contentbreedte als de rest van de site (1184px = 1240 incl. 28px padding) + meer ruimte boven de H1 */
html body.woocommerce-order-received main.site-main {
	max-width: 1240px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 56px 28px 64px !important;
}
/* Witte blok over de volle containerbreedte, padding 40px (mobiel 20px) */
html body .woocommerce-order.awcc-ty {
	max-width: none !important;
	width: 100% !important;
	margin: 20px 0 0 !important;
	padding: 40px !important;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	html body.woocommerce-order-received main.site-main {
		padding: 32px 16px 40px !important;
	}
	html body .woocommerce-order.awcc-ty {
		padding: 20px !important;
	}
}
/* H1 'Bestelling ontvangen' op dezelfde linkerlijn (thema begrenst/centreert op 1140px) */
html body.woocommerce-order-received .page-header,
html body.woocommerce-order-received .page-header .entry-title {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* Bedankpagina: bovenste H1 'Bestelling ontvangen' weg (de kop staat al in het witte blok) */
html body.woocommerce-order-received .page-header {
	display: none !important;
}
html body.woocommerce-order-received .woocommerce-order.awcc-ty {
	margin-top: 0 !important;
}

/* Bedankpagina-knoppen: lettertype als de site-knoppen (Oswald, bold, hoofdletters); 'Verder winkelen' in #FF6703, hover donkerder */
html body .awcc-ty .awcc-ty-btn {
	font-family: var(--e-global-typography-accent-font-family, 'Oswald'), sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
}
html body .awcc-ty .awcc-ty-btn--primary {
	background: var(--e-global-color-primary, #ff6703) !important;
	border-color: var(--e-global-color-primary, #ff6703) !important;
	color: #fff !important;
}
html body .awcc-ty .awcc-ty-btn--primary:hover {
	background: var(--e-global-color-accent, #e05a00) !important;
	border-color: var(--e-global-color-accent, #e05a00) !important;
	color: #fff !important;
}