/* LuxeFashion winkelwagen & checkout: klassieke WooCommerce-shortcodes
   ([woocommerce_cart] / [woocommerce_checkout]) in eigen childtheme-
   templates (page-templates/cart.php, page-templates/checkout.php).
   Geen Elementor meer op deze twee pagina's. */

.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
	max-width: 1320px;
	margin: 0 auto;
	padding: 40px 24px 64px;
	font-family: var(--lf-font-body);
}

table.shop_table {
	border: none;
	border-collapse: collapse;
	width: 100%;
}
table.shop_table th {
	font-family: var(--lf-font-body);
	font-size: 12px;
	font-weight: 700;
	color: var(--lf-muted);
	border-bottom: 1px solid var(--lf-line);
	padding: 12px 8px;
	text-align: left;
}
table.shop_table td {
	border-bottom: 1px solid var(--lf-line);
	padding: 16px 8px;
	font-size: 14px;
	color: var(--lf-ink);
}
table.shop_table .product-thumbnail img {
	width: 72px;
	height: 90px;
	object-fit: cover;
	background: #F1F1EE;
}
table.shop_table .product-name a {
	color: var(--lf-ink);
	font-weight: 500;
}

/*
 * Iets breder dan de standaard 64px + meer horizontale padding: de op-/
 * neer-pijltjes die de browser zelf op dit number-veld tekent, stonden
 * anders vrijwel tegen de rand van het vak aan. Alleen ruimte/breedte
 * aangepast — border, achtergrond en de werking van het veld blijven gelijk.
 */
.woocommerce-cart-form .quantity input.qty {
	width: 78px;
	padding: 10px 14px;
	border: 1px solid var(--lf-line);
	background: #FFFFFF;
	box-sizing: border-box;
}

.cart_totals,
.woocommerce-checkout-review-order {
	background: #F1F1EE;
	padding: 24px;
}
.cart_totals h2,
#order_review_heading {
	font-family: var(--lf-font-heading);
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 16px;
}
.cart_totals table.shop_table td,
.cart_totals table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td,
.woocommerce-checkout-review-order table.shop_table th {
	border-color: var(--lf-line);
}
.order-total .woocommerce-Price-amount { font-weight: 700; }

/* Voortgang richting gratis verzending, vlak boven de knop: .lf-shipping-bar
   (sitewide in assets/css/shop.css, want dezelfde component staat ook in de
   mini-cart). Hier alleen de plaatsing t.o.v. de checkout-knop. */
.lf-shipping-bar { margin: 0 0 16px; }

.wc-proceed-to-checkout .checkout-button,
#place_order,
.checkout-button {
	display: block;
	width: 100%;
	padding: 16px;
	background: var(--lf-sage) !important;
	color: #FFFFFF !important;
	border: none;
	font-family: var(--lf-font-body);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}
.wc-proceed-to-checkout .checkout-button:hover,
#place_order:hover { opacity: 0.9; }

.woocommerce-form-coupon input[type="text"],
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	padding: 12px 14px;
	border: 1px solid var(--lf-line);
	background: #FFFFFF;
	font-family: var(--lf-font-body);
	font-size: 14px;
	width: 100%;
}
.woocommerce-checkout label {
	font-family: var(--lf-font-body);
	font-size: 12px;
	font-weight: 600;
	color: var(--lf-ink);
}
.woocommerce-checkout #payment {
	background: #F1F1EE;
}
.woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: 500;
}

/* Lege winkelwagen: nette staat i.p.v. kaal bericht */
.woocommerce-cart .wc-empty-cart-message,
.cart-empty {
	text-align: center;
	padding: 64px 24px;
	background: #F1F1EE;
	font-family: var(--lf-font-body);
	color: var(--lf-muted);
}
.woocommerce-cart .return-to-shop .button {
	display: inline-flex;
	margin-top: 20px;
	padding: 14px 32px;
	background: var(--lf-sage) !important;
	color: #FFFFFF !important;
	font-weight: 600;
	text-transform: none;
}

@media (max-width: 700px) {
	table.shop_table thead { display: none; }
	table.shop_table tr { display: block; border-bottom: 1px solid var(--lf-line); padding: 12px 0; }
	table.shop_table td { display: block; border: none; padding: 4px 0; }
}

/* ---------- Paginatitels ---------- */
.lf-cart-page__title,
.lf-checkout-page__title {
	margin: 0 0 24px;
}

/* ---------- Betaalmethode (WhatsApp) — de belangrijkste keuze op de afrekenpagina ---------- */
.woocommerce-checkout #payment {
	background: #FFFFFF;
	border: 2px solid var(--lf-sage);
	padding: 20px;
	margin-top: 24px;
}
.woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}
.woocommerce-checkout #payment ul.payment_methods li {
	margin: 0;
}
.woocommerce-checkout #payment ul.payment_methods li label {
	font-family: var(--lf-font-heading);
	font-size: 19px;
	font-weight: 600;
	color: var(--lf-ink);
}
.woocommerce-checkout #payment .payment_box {
	margin-top: 12px;
	padding: 14px 16px;
	background: var(--lf-bg);
	font-family: var(--lf-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--lf-ink);
}
.woocommerce-checkout #payment .payment_box p {
	margin: 0;
}

/* ---------- Meldingen (o.a. minimum bestelbedrag) — rustige stijl i.p.v.
   WooCommerce's standaard rode balk, zelfde patroon als op de productpagina. ---------- */
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
	background: #F1F1EE;
	border: 1px solid var(--lf-line);
	border-left: 3px solid var(--lf-ink);
	color: var(--lf-ink);
	font-family: var(--lf-font-body);
	font-size: 13px;
	padding: 14px 16px;
	margin: 0 0 16px;
	list-style: none;
}
.woocommerce-cart .woocommerce-error::before,
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before,
.woocommerce-checkout .woocommerce-error::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-info::before {
	display: none;
}

/* ---------- Mobiel: geen horizontale scroll, duimvriendelijke knoppen ---------- */
.woocommerce-cart,
.woocommerce-checkout {
	max-width: 100%;
	overflow-x: hidden;
}
.wc-proceed-to-checkout .checkout-button,
#place_order,
.checkout-button,
.woocommerce-cart .return-to-shop .button {
	min-height: 48px;
}
@media (max-width: 480px) {
	.woocommerce-cart .entry-content,
	.woocommerce-checkout .entry-content {
		padding: 24px 16px 40px;
	}
	.woocommerce-checkout #payment ul.payment_methods li label {
		font-size: 17px;
	}
}

/* ---------- Afrekenpagina: uitgeklede kop en minimale voettekst ---------- */
.lf-checkout-header {
	background: var(--lf-deep);
	padding: 20px 24px;
	text-align: center;
}
.lf-checkout-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.lf-checkout-header__logo-mark {
	display: block;
	height: 40px;
	width: auto;
}
.lf-checkout-header__logo-word {
	font-family: var(--lf-font-heading);
	font-size: 19px;
	font-weight: 400;
	color: var(--lf-on-dark);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.lf-checkout-main {
	display: block;
}
.lf-checkout-footer {
	background: var(--lf-deep);
	color: var(--lf-on-dark-muted);
	padding: 40px 24px 24px;
	margin-top: 48px;
}
.lf-checkout-footer__inner {
	max-width: 900px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	text-align: center;
}
.lf-checkout-footer__item h3 {
	font-family: var(--lf-font-body);
	font-size: 13px;
	font-weight: 700;
	color: var(--lf-on-dark);
	margin: 0 0 6px;
}
.lf-checkout-footer__item p {
	font-family: var(--lf-font-body);
	font-size: 13px;
	color: var(--lf-on-dark-muted);
	margin: 0;
	line-height: 1.5;
}
.lf-checkout-footer__copyright {
	text-align: center;
	font-family: var(--lf-font-body);
	font-size: 12px;
	color: var(--lf-on-dark-muted);
	margin: 32px 0 0;
}
@media (max-width: 700px) {
	.lf-checkout-footer__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ---------- Adres automatisch aanvullen (postcode + huisnummer) ---------- */
/* Rustige melding als een adres niet gevonden wordt: geen rode alarmbalk,
   dezelfde stijl als de rest van de afrekenpagina. */
.lf-address-lookup-notice {
	clear: both;
	margin: -8px 0 16px;
	padding: 10px 12px;
	background: #F1F1EE;
	border-left: 3px solid var(--lf-line);
	font-family: var(--lf-font-body);
	font-size: 13px;
	color: var(--lf-muted);
}

/* Huisnummer krijgt exact dezelfde veldstijl als de andere adresvelden
   (input[type="text"] hierboven regelt dat al) — hier alleen de breedte
   binnen de form-row-first/form-row-last-indeling, en het inspringen dat
   WooCommerce standaard aan form-row-last geeft. */
.lf-house-number-field {
	clear: none;
}

@media (max-width: 480px) {
	/* Postcode/huisnummer naast elkaar blijft ook op smalle schermen prima
	   passen (WooCommerce's form-row-first/-last is al percentagebreed),
	   maar de duimvriendelijke minimale veldhoogte moet ook hier gelden. */
	.woocommerce-checkout .lf-house-number-field input,
	.woocommerce-checkout #billing_postcode,
	.woocommerce-checkout #shipping_postcode {
		min-height: 44px;
	}
}