/* ==========================================================================
   Hex WooCommerce Bundle – Modern Checkout Stijl (Flatsome theme)
   Scoped: body.hexco-checkout-active
   Thema-structuur:
     .large-7.col  → linkerkolom (#customer_details)
     .large-5.col  → rechterkolom (.checkout-sidebar > #order_review)
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
	--hxc-accent:        #c0392b;
	--hxc-accent-dark:   #962d22;
	--hxc-accent-alpha:  rgba(192, 57, 43, .10);
	--hxc-bg:            #f5f4f2;
	--hxc-white:         #ffffff;
	--hxc-border:        #e5e7eb;
	--hxc-text:          #111827;
	--hxc-muted:         #6b7280;
	--hxc-radius:        10px;
	--hxc-radius-sm:     7px;
	--hxc-shadow:        0 1px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
	--hxc-shadow-btn:    0 4px 14px rgba(192, 57, 43, .32);
	--hxc-pad:           22px;
}
.has-border {
    border: none !important;
    padding: 0 !important;
}
.shipping__table tr {
    padding: 0 !important;
}
/* ── Paginaachtergrond ───────────────────────────────────────────────────── */
body.hexco-checkout-active {
	background-color: var(--hxc-bg) !important;
}

/* ── Kolombreedte: linker iets ruimer, rechter genoeg voor summary ───────── */
body.hexco-checkout-active .large-7.col {
	padding-right: 12px;
}
body.hexco-checkout-active .large-5.col {
	padding-left: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────
   LINKERKOLOM — klant- en bezorggegevens
   ───────────────────────────────────────────────────────────────────────── */

/* WooCommerce .col2-set gebruikt floats voor sub-kolommen; hier opgeven:
   alle secties moeten gestapeld (full-width) tonen.                        */
body.hexco-checkout-active #customer_details.col2-set {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: visible;
}
body.hexco-checkout-active #customer_details.col2-set::after {
	display: none;
}
body.hexco-checkout-active #customer_details.col2-set .col-1,
body.hexco-checkout-active #customer_details.col2-set .col-2 {
	float: none !important;
	width: 100% !important;
	padding: 0 !important;
	box-sizing: border-box;
}
/* col-2 (bezorgdatum + notities) visueel vóór col-1 (factuurgeg.) */
body.hexco-checkout-active #customer_details.col2-set .col-1 { order: 2; }
body.hexco-checkout-active #customer_details.col2-set .col-2 { order: 1; }

/* Sectiekaarten (bezorging, facturering, notities) */
body.hexco-checkout-active .woocommerce-billing-fields,
body.hexco-checkout-active .woocommerce-shipping-fields {
	background: var(--hxc-white);
	border: 1px solid var(--hxc-border);
	border-radius: var(--hxc-radius);
	padding: var(--hxc-pad);
	box-shadow: var(--hxc-shadow);
	margin-bottom: 16px;
}

/* .woocommerce-additional-fields bevat zowel #jckwds-fields als de notities;
   transparante wrapper zodat de kinderen als losse kaarten kunnen stijlen.  */
body.hexco-checkout-active .woocommerce-additional-fields {
	background: transparent;
	border: none;
	padding: 0;
	margin-bottom: 0;
	box-shadow: none;
}

/* Bezorgdatum-kaart (iconic Woo Delivery Slots) met rode linkerborder */
body.hexco-checkout-active #jckwds-fields,
body.hexco-checkout-active .iconic-wds-fields {
	background: var(--hxc-white);
	border: 1px solid var(--hxc-border);
	border-left: 4px solid var(--hxc-accent);
	border-radius: var(--hxc-radius);
	padding: var(--hxc-pad);
	box-shadow: var(--hxc-shadow);
	margin-bottom: 16px;
}

/* Notitieveld als eigen kaart */
body.hexco-checkout-active #order_comments_field,
body.hexco-checkout-active .woocommerce-additional-fields .form-row.notes {
	background: var(--hxc-white);
	border: 1px solid var(--hxc-border);
	border-radius: var(--hxc-radius);
	padding: var(--hxc-pad);
	box-shadow: var(--hxc-shadow);
	margin-bottom: 16px;
}

/* Sectiekoppen */
body.hexco-checkout-active #customer_details h3,
body.hexco-checkout-active .iconic-wds-fields__title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--hxc-text);
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--hxc-border);
	letter-spacing: .01em;
}
body.hexco-checkout-active .iconic-wds-fields__title {
	border-bottom-color: var(--hxc-accent);
}

/* Formulierlabels */
body.hexco-checkout-active #customer_details label,
body.hexco-checkout-active #jckwds-fields label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hxc-text);
	display: block;
	margin-bottom: 5px;
}
body.hexco-checkout-active #customer_details label .required,
body.hexco-checkout-active #jckwds-fields label .required {
	color: var(--hxc-accent);
}

/* Invoervelden */
body.hexco-checkout-active #customer_details input.input-text,
body.hexco-checkout-active #customer_details input[type="text"],
body.hexco-checkout-active #customer_details input[type="email"],
body.hexco-checkout-active #customer_details input[type="tel"],
body.hexco-checkout-active #customer_details select,
body.hexco-checkout-active #customer_details textarea,
body.hexco-checkout-active #jckwds-fields input,
body.hexco-checkout-active #jckwds-fields select {
	width: 100% !important;
	height: 44px !important;
	border: 1px solid var(--hxc-border) !important;
	border-radius: var(--hxc-radius-sm) !important;
	padding: 0 13px !important;
	font-size: 0.9375rem !important;
	color: var(--hxc-text) !important;
	background: var(--hxc-white) !important;
	box-sizing: border-box !important;
	line-height: 44px !important;
}
body.hexco-checkout-active #customer_details textarea {
	height: auto !important;
	min-height: 88px !important;
	line-height: 1.5 !important;
	padding: 11px 13px !important;
	resize: vertical;
}
body.hexco-checkout-active #customer_details input:focus,
body.hexco-checkout-active #customer_details select:focus,
body.hexco-checkout-active #customer_details textarea:focus,
body.hexco-checkout-active #jckwds-fields input:focus,
body.hexco-checkout-active #jckwds-fields select:focus {
	border-color: var(--hxc-accent) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px var(--hxc-accent-alpha) !important;
}

/* Select2 (bezorgslots) */
body.hexco-checkout-active .select2-container .select2-selection--single {
	height: 44px !important;
	border: 1px solid var(--hxc-border) !important;
	border-radius: var(--hxc-radius-sm) !important;
}
body.hexco-checkout-active .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 44px !important;
	padding-left: 13px !important;
	color: var(--hxc-text) !important;
	font-size: 0.9375rem !important;
}
body.hexco-checkout-active .select2-container .select2-selection--single .select2-selection__arrow {
	height: 44px !important;
}
body.hexco-checkout-active .select2-container--open .select2-selection--single,
body.hexco-checkout-active .select2-container--focus .select2-selection--single {
	border-color: var(--hxc-accent) !important;
	box-shadow: 0 0 0 3px var(--hxc-accent-alpha) !important;
}

/* Validatiefout */
body.hexco-checkout-active .woocommerce-invalid input,
body.hexco-checkout-active .woocommerce-invalid select {
	border-color: var(--hxc-accent) !important;
}

/* Form-row sub-kolommen (voornaam/achternaam naast elkaar) — full width binnen kaart */
body.hexco-checkout-active .form-row-first,
body.hexco-checkout-active .form-row-last {
	width: 100% !important;
	float: none !important;
	clear: both !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   RECHTERKOLOM — bestelling & betaling (Flatsome .checkout-sidebar)
   ───────────────────────────────────────────────────────────────────────── */

/* Sidebar-kaart */
body.hexco-checkout-active .checkout-sidebar {
	background: var(--hxc-white) !important;
	border: 1px solid var(--hxc-border) !important;
	border-radius: var(--hxc-radius) !important;
	box-shadow: var(--hxc-shadow) !important;
	overflow: hidden !important;
	padding: 0 !important;
}

/* Heading "Je bestelling" */
body.hexco-checkout-active .checkout-sidebar h3#order_review_heading {
	font-size: 1rem;
	font-weight: 700;
	color: var(--hxc-text);
	margin: 0;
	padding: 18px var(--hxc-pad);
	border-bottom: 2px solid var(--hxc-border);
	letter-spacing: .01em;
	display: block !important; /* overschrijft eventuele display:none van vorige CSS */
}

/* #order_review padding */
body.hexco-checkout-active #order_review {
	padding: 0 !important;
}

/* ── Bestelling-overzichttabel moderniseren ────────────────────────────── */

/* Verberg tabelkop — we stijlen rijen als flex */
body.hexco-checkout-active .woocommerce-checkout-review-order-table thead {
	display: none;
}

body.hexco-checkout-active .woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

/* Productregels */
body.hexco-checkout-active .woocommerce-checkout-review-order-table tbody tr.cart_item {
	display: flex !important;
	justify-content: space-between;
	align-items: flex-start;
	padding: 14px var(--hxc-pad);
	border-bottom: 1px solid var(--hxc-border);
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table tbody tr.cart_item td {
	display: block !important;
	border: none !important;
	padding: 0 !important;
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-name {
	flex: 1 1 auto;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hxc-text);
	padding-right: 12px !important;
	line-height: 1.4;
}

/* ── Cart-item: afbeelding + (titel + varianten) ────────────────────────── */

/* Flex-rij: img links, div(titel + dl) rechts */
body.hexco-checkout-active .woocommerce-checkout-review-order-table .hex-wcb-co-name {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
}

/* Afbeelding */
body.hexco-checkout-active .woocommerce-checkout-review-order-table .hex-wcb-co-thumb {
	width: 56px !important;
	min-width: 56px !important;
	height: 56px !important;
	object-fit: cover !important;
	border-radius: 6px !important;
	display: block !important;
	flex-shrink: 0 !important;
	background: #f3f3f3 !important;
}

/* Wrapper-div voor titel + varianten (na JS-herstructurering) */
body.hexco-checkout-active .woocommerce-checkout-review-order-table .hex-wcb-co-name > div {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

/* Producttitel */
body.hexco-checkout-active .woocommerce-checkout-review-order-table .hex-wcb-co-name__text {
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	color: var(--hxc-text) !important;
	line-height: 1.3 !important;
	display: block !important;
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table .hex-wcb-co-name__text a {
	color: inherit !important;
	text-decoration: none !important;
}

/* Hoeveelheid voor niet-bundle items (behoudt 68px inspringing) */
body.hexco-checkout-active .woocommerce-checkout-review-order-table .product-name strong.product-quantity {
	display: block !important;
	margin-left: 68px !important;
	font-weight: 400 !important;
	font-size: 0.78rem !important;
	color: var(--hxc-muted) !important;
	line-height: 1.4 !important;
}

/* ── Bundle-breakdown DL ────────────────────────────────────────────────── */

/* DL ínin de wrapper-div (na JS) → geen extra inspringing nodig */
body.hexco-checkout-active .woocommerce-checkout-review-order-table .hex-wcb-co-name > div dl,
body.hexco-checkout-active .woocommerce-checkout-review-order-table .hex-wcb-co-name > div .variation {
	margin: 2px 0 0 !important;
	padding: 0;
	display: grid !important;
	grid-template-columns: auto 1fr;
	column-gap: 5px;
	row-gap: 1px;
}

/* Fallback: DL nog direct in .product-name (vóór JS of niet-bundle) */
body.hexco-checkout-active .woocommerce-checkout-review-order-table .product-name > dl,
body.hexco-checkout-active .woocommerce-checkout-review-order-table .product-name > .variation {
	margin: 4px 0 0 68px !important;
	padding: 0;
	display: grid !important;
	grid-template-columns: auto 1fr;
	column-gap: 5px;
	row-gap: 1px;
}

body.hexco-checkout-active .woocommerce-checkout-review-order-table .product-name dl dt,
body.hexco-checkout-active .woocommerce-checkout-review-order-table .product-name .variation dt {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--hxc-muted);
	white-space: nowrap;
	padding: 0 !important;
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table .product-name dl dd,
body.hexco-checkout-active .woocommerce-checkout-review-order-table .product-name .variation dd {
	font-size: 0.75rem;
	color: var(--hxc-muted);
	margin: 0 !important;
	padding: 0 !important;
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table .product-name dl dd p,
body.hexco-checkout-active .woocommerce-checkout-review-order-table .product-name .variation dd p {
	margin: 0;
	display: inline;
}

/* ── Prijs-kolom: badge + prijs + verwijder ─────────────────────────────── */

body.hexco-checkout-active .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total {
	flex-shrink: 0;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	gap: 5px !important;
	white-space: nowrap;
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table tbody tr.cart_item td.product-total .woocommerce-Price-amount {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--hxc-text);
	display: block;
}

/* Verwijder-link + Aanpassen-knop: zelfde grootte, onder elkaar */
body.hexco-checkout-active .hex-wcb-co-remove,
body.hexco-checkout-active .hex-wcb-co-edit {
	display: block !important;
	font-size: 0.72rem !important;
	font-weight: 400 !important;
	color: var(--hxc-muted) !important;
	text-decoration: none !important;
	transition: color .15s !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	line-height: 1.6 !important;
	text-align: right !important;
    margin-bottom: -6px !important;

    text-transform: initial !important;
}
body.hexco-checkout-active .hex-wcb-co-edit {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: inherit !important;
}
body.hexco-checkout-active .hex-wcb-co-remove:hover,
body.hexco-checkout-active .hex-wcb-co-edit:hover {
	color: var(--hxc-accent) !important;
	text-decoration: underline !important;
}

/* Voettabel (subtotaal, verzending, totaal) */
body.hexco-checkout-active .woocommerce-checkout-review-order-table tfoot tr {
	display: flex !important;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px var(--hxc-pad);
	border-bottom: 1px solid var(--hxc-border);
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table tfoot tr td,
body.hexco-checkout-active .woocommerce-checkout-review-order-table tfoot tr th {
	display: block !important;
	border: none !important;
	padding: 0 !important;
	font-size: 0.875rem;
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table tfoot tr th {
	font-weight: 600;
	color: var(--hxc-text);
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table tfoot tr td {
	font-weight: 600;
	text-align: right;
}

/* Totaalrij */
body.hexco-checkout-active .woocommerce-checkout-review-order-table tfoot tr.order-total {
	border-bottom: none;
	padding-top: 14px;
	padding-bottom: 14px;
	border-top: 2px solid var(--hxc-text);
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table tfoot tr.order-total th,
body.hexco-checkout-active .woocommerce-checkout-review-order-table tfoot tr.order-total td {
	font-size: 1.05rem;
	font-weight: 700;
}

/* Verzending inline tabel (Flatsome stijlt die anders) */
body.hexco-checkout-active .woocommerce-checkout-review-order-table .shipping__inner {
	padding: 0px !important;
	width:100%;
}
body.hexco-checkout-active .woocommerce-checkout-review-order-table .shipping__table {
	width: 100%;
}
body.hexco-checkout-active #shipping_method {
	list-style: none;
	padding: 0;
	margin: 0;
}
body.hexco-checkout-active #shipping_method li {
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	gap: 6px;
}
body.hexco-checkout-active #shipping_method li input[type="radio"] {
	accent-color: var(--hxc-accent);
}

/* ── Waardebon (als kaart, onder bestelnotities) ─────────────────────── */
body.hexco-checkout-active .woocommerce-form-coupon-toggle,
 body.hexco-checkout-active .woocommerce-form-coupon {
	background: var(--hxc-white);
	border: 1px solid var(--hxc-border) !important;
	border-radius: var(--hxc-radius);
	padding: var(--hxc-pad) !important;
	box-shadow: var(--hxc-shadow);
	margin-bottom: 16px;
}

body.hexco-checkout-active .woocommerce-form-coupon-toggle .woocommerce-info {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	font-size: 0.875rem;
	color: var(--hxc-text);
}
body.hexco-checkout-active .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none !important;
}
body.hexco-checkout-active .woocommerce-form-coupon-toggle .showcoupon {
	font-size: 0.8125rem;
	color: var(--hxc-accent);
	text-decoration: none;
	font-weight: 600;
}
body.hexco-checkout-active .woocommerce-form-coupon-toggle .showcoupon:hover {
	text-decoration: underline;
}
body.hexco-checkout-active .checkout_coupon {
	display: block;
}
body.hexco-checkout-active .checkout_coupon p.form-row {
	flex: 1 1 140px;
	margin: 0;
}
body.hexco-checkout-active .checkout_coupon input.input-text {
	height: 40px !important;
	border: 1px solid var(--hxc-border) !important;
	border-radius: var(--hxc-radius-sm) !important;
	padding: 0 12px !important;
	font-size: 0.875rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
body.hexco-checkout-active .checkout_coupon .button {
	flex-shrink: 0;
	height: 40px;
	background: var(--hxc-text) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--hxc-radius-sm) !important;
	padding: 0 18px !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: background .15s !important;
}
body.hexco-checkout-active .checkout_coupon .button:hover {
	background: #333 !important;
}

/* ── Betaalmethoden ───────────────────────────────────────────────────── */
body.hexco-checkout-active #payment {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
body.hexco-checkout-active #payment ul.payment_methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--hxc-border);
}
body.hexco-checkout-active #payment ul.payment_methods li {
	padding: 12px var(--hxc-pad) !important;
	border-bottom: 1px solid var(--hxc-border) !important;
	background: var(--hxc-white) !important;
	margin: 0 !important;
}
body.hexco-checkout-active #payment ul.payment_methods li input[type="radio"] {
	margin-right: 7px;
	accent-color: var(--hxc-accent);
	width: 15px;
	height: 15px;
	vertical-align: middle;
}
body.hexco-checkout-active #payment ul.payment_methods li label {
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	vertical-align: middle;
	color: var(--hxc-text);
}
body.hexco-checkout-active #payment ul.payment_methods li img {
	max-height: 22px;
	width: auto;
	vertical-align: middle;
	margin-left: 6px;
}
body.hexco-checkout-active #payment div.payment_box {
	background: #f8f8f8 !important;
	border-radius: var(--hxc-radius-sm) !important;
	padding: 10px 14px !important;
	margin: 6px 0 4px !important;
	font-size: 0.8125rem !important;
	color: var(--hxc-muted) !important;
}
body.hexco-checkout-active #payment div.payment_box::before {
	border-bottom-color: #f8f8f8 !important;
}

/* ── Algemene voorwaarden + overige form-rows in payment ─────────────── */
body.hexco-checkout-active #payment .form-row.place-order {
	padding: 0 var(--hxc-pad) var(--hxc-pad) !important;
	margin: 0 !important;
}
body.hexco-checkout-active .woocommerce-terms-and-conditions-wrapper {
	font-size: 0.8rem;
	color: var(--hxc-muted);
	margin: 8px 0;
	line-height: 1.5;
}
body.hexco-checkout-active .woocommerce-terms-and-conditions-wrapper a {
	color: var(--hxc-accent);
}
body.hexco-checkout-active .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	margin-right: 5px;
	accent-color: var(--hxc-accent);
	width: 14px;
	height: 14px;
	vertical-align: middle;
}

/* ── "Plaats bestelling" CTA ──────────────────────────────────────────── */
body.hexco-checkout-active #place_order {
	display: block !important;
	width: 100% !important;
	height: 52px !important;
	background-color: var(--hxc-accent) !important;
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	letter-spacing: .07em !important;
	border-radius: var(--hxc-radius) !important;
	border: none !important;
	cursor: pointer !important;
	box-shadow: var(--hxc-shadow-btn) !important;
	transition: background-color .18s, transform .12s, box-shadow .18s !important;
	line-height: 52px !important;
	box-sizing: border-box !important;
	margin-top: 12px !important;
}
body.hexco-checkout-active #place_order:hover {
	background-color: var(--hxc-accent-dark) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(192, 57, 43, .40) !important;
}
body.hexco-checkout-active #place_order:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 6px rgba(192, 57, 43, .22) !important;
}


/* ─────────────────────────────────────────────────────────────────────────
   JQUERY UI DATEPICKER — iconic Woo Delivery Slots
   #ui-datepicker-div is appended to <body>, scoped via body.hexco-checkout-active
   ───────────────────────────────────────────────────────────────────────── */

body.hexco-checkout-active #ui-datepicker-div {
	background: var(--hxc-white) !important;
	border: 1px solid var(--hxc-border) !important;
	border-radius: var(--hxc-radius) !important;
	box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.07) !important;
	padding: 16px !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	min-width: 280px !important;
	z-index: 99999 !important;
}

/* ── Header (maand + jaar + navigatie) ───────────────────────────────── */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-header {
	background: transparent !important;
	border: none !important;
	border-bottom: 2px solid var(--hxc-border) !important;
	border-radius: 0 !important;
	padding: 0 0 12px !important;
	margin-bottom: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	position: relative !important;
}

body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-title {
	font-size: 0.9375rem !important;
	font-weight: 700 !important;
	color: var(--hxc-text) !important;
	text-align: center !important;
	flex: 1 !important;
	line-height: 1 !important;
}

/* Prev / Next pijlen */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-prev,
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-next {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	background: transparent !important;
	border: 1px solid var(--hxc-border) !important;
	transition: background .15s, border-color .15s !important;
	text-decoration: none !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	flex-shrink: 0 !important;
}
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-prev:hover,
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-next:hover {
	background: var(--hxc-accent-alpha) !important;
	border-color: var(--hxc-accent) !important;
}
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-prev.ui-state-disabled,
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-next.ui-state-disabled {
	opacity: .3 !important;
	cursor: default !important;
	pointer-events: none !important;
}

/* Verberg standaard jQuery UI icon-tekst, toon pijl via pseudo-element */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-prev .ui-icon,
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-next .ui-icon {
	background-image: none !important;
	text-indent: 0 !important;
	overflow: visible !important;
	font-size: 0 !important;
	position: static !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
}
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-prev .ui-icon::after {
	content: '←' !important;
	font-size: 0.875rem !important;
	color: var(--hxc-text) !important;
}
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-next .ui-icon::after {
	content: '→' !important;
	font-size: 0.875rem !important;
	color: var(--hxc-text) !important;
}

/* ── Kalendertabel ───────────────────────────────────────────────────── */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar {
	width: 100% !important;
	border-collapse: collapse !important;
	table-layout: fixed !important;
}

/* Kolomkoppen (Ma, Di …) */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar thead th {
	padding: 4px 0 8px !important;
	text-align: center !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	color: var(--hxc-muted) !important;
	border: none !important;
	background: transparent !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
}

/* Dagcellen — basis */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar tbody td {
	padding: 2px !important;
	text-align: center !important;
	border: none !important;
	background: transparent !important;
}

/* Span + anchor — de dagweergave */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td span.ui-state-default,
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-default {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	margin: 0 auto !important;
	border-radius: 50% !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	border: none !important;
	text-decoration: none !important;
	background: transparent !important;
	transition: background .13s, color .13s !important;
}

/* Niet-beschikbare / uitgeschakelde dagen */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td.ui-state-disabled span.ui-state-default,
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span.ui-state-default {
	color: #d1d5db !important;
	cursor: default !important;
}

/* Andere maanden — nog subtieler */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month span.ui-state-default {
	color: #e5e7eb !important;
}

/* Vandaag */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today span.ui-state-default,
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a.ui-state-default {
	background: #fef2f2 !important;
	color: var(--hxc-accent) !important;
	font-weight: 700 !important;
}

/* Beschikbare dagen — hover */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td:not(.ui-state-disabled):not(.ui-datepicker-unselectable) a.ui-state-default:hover,
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-hover {
	background: var(--hxc-accent-alpha) !important;
	color: var(--hxc-accent) !important;
}

/* Geselecteerde dag (ui-state-active / ui-datepicker-current-day) */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day a,
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active,
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td a[aria-current="true"] {
	background: var(--hxc-accent) !important;
	color: #fff !important;
	font-weight: 700 !important;
}

/* Weekenddagen (niet extra opvallen) */
body.hexco-checkout-active #ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end.ui-state-disabled span.ui-state-default {
	color: #e5e7eb !important;
}

/* ── Woo notices ──────────────────────────────────────────────────────── */
body.hexco-checkout-active .woocommerce-error,
body.hexco-checkout-active .woocommerce-message,
body.hexco-checkout-active .woocommerce-info {
	border-radius: var(--hxc-radius-sm);
	margin-bottom: 18px;
	font-size: 0.875rem;
}

/* Privacy-beleid-tekst */
body.hexco-checkout-active .woocommerce-privacy-policy-text {
	font-size: 0.75rem;
	color: var(--hxc-muted);
	padding: 8px var(--hxc-pad);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Bundle Edit Modal
   ═══════════════════════════════════════════════════════════════════════════ */

/* Aanpassen-knop – basisstijl staat bij .hex-wcb-co-remove hierboven */

/* Modal-overlay */
#hexco-edit-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
	box-sizing: border-box !important;
}
#hexco-edit-modal[hidden] {
	display: none !important;
}

.hexco-modal__backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, .55) !important;
	-webkit-backdrop-filter: blur(3px) !important;
	backdrop-filter: blur(3px) !important;
	cursor: pointer !important;
}

.hexco-modal__dialog {
	position: relative !important;
	z-index: 1 !important;
	background: #fff !important;
	border-radius: 14px !important;
	width: min(500px, 100%) !important;
	max-height: calc(100dvh - 32px) !important;
	display: flex !important;
	flex-direction: column !important;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .22) !important;
	animation: hexco-modal-in .22s cubic-bezier(.34, 1.28, .64, 1) both !important;
}

@keyframes hexco-modal-in {
	from { transform: scale(.94) translateY(8px); opacity: 0; }
	to   { transform: scale(1)   translateY(0);   opacity: 1; }
}

/* Header */
.hexco-modal__header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 20px 24px 16px !important;
	border-bottom: 1px solid #ebebeb !important;
	flex-shrink: 0 !important;
}
.hexco-modal__header h2 {
	font-size: 1.05rem !important;
	font-weight: 700 !important;
	color: var(--hxc-text, #1a1a1a) !important;
	margin: 0 !important;
}
.hexco-modal__close {
	background: none !important;
	border: none !important;
	font-size: 1.5rem !important;
	line-height: 1 !important;
	color: #aaa !important;
	cursor: pointer !important;
	padding: 0px !important;
	border-radius: 6px !important;
	transition: background .15s, color .15s !important;
	flex-shrink: 0 !important;
	margin:0;
	min-height: initial;
}
.hexco-modal__close:hover {
	background: #f4f4f4 !important;
	color: #333 !important;
}

/* Body / Form */
.hexco-modal__body {
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 22px 24px 8px !important;
	flex: 1 !important;
    gap: initial !important;
}

/* Foutmelding in modal */
.hexco-modal__error {
	padding: 10px 14px !important;
	background: #fff3f4 !important;
	border: 1px solid #fcc !important;
	border-radius: 7px !important;
	color: var(--hxc-accent, #e2001a) !important;
	font-size: 0.825rem !important;
	margin-bottom: 16px !important;
}

/* Velden */
.hexco-modal__field-group {
	margin-bottom: 18px !important;
}
.hexco-modal__field-group label {
	display: block !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	color: #888 !important;
	text-transform: uppercase !important;
	letter-spacing: .06em !important;
	margin-bottom: 7px !important;
}

/* Select */
.hexco-modal__select {
	width: 100% !important;
	padding: 10px 12px !important;
	border: 1.5px solid #ddd !important;
	border-radius: 8px !important;
	font-size: 0.875rem !important;
	color: var(--hxc-text, #1a1a1a) !important;
	background: #fff !important;
	appearance: auto !important;
	cursor: pointer !important;
	transition: border-color .15s !important;
	box-sizing: border-box !important;
}
.hexco-modal__select:focus {
	outline: none !important;
	border-color: var(--hxc-accent, #e2001a) !important;
}

/* Stepper */
.hexco-modal__stepper {
	display: inline-flex !important;
	align-items: center !important;
	border: 1.5px solid #ddd !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}
.hexco-modal__step-btn {
	width: 40px !important;
	height: 42px !important;
	border: none !important;
	background: #f6f6f6 !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #444 !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background .12s !important;
	line-height: 1 !important;
}
.hexco-modal__step-btn:hover {
	background: #ededed !important;
}
.hexco-modal__step-input {
	width: 64px !important;
	text-align: center !important;
	border: none !important;
	border-left: 1.5px solid #ddd !important;
	border-right: 1.5px solid #ddd !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	padding: 8px 4px !important;
	color: var(--hxc-text, #1a1a1a) !important;
	-moz-appearance: textfield !important;
}
.hexco-modal__step-input::-webkit-outer-spin-button,
.hexco-modal__step-input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* Footer */
.hexco-modal__footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
	padding: 14px 24px !important;
	border-top: 1px solid #ebebeb !important;
	flex-shrink: 0 !important;
	flex-wrap: wrap !important;
}
.hexco-modal__total {
	display: flex !important;
	flex-direction: column !important;
	gap: 1px !important;
	min-width: 0 !important;
}
.hexco-modal__total-label {
	font-size: 0.68rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .07em !important;
	color: #999 !important;
	line-height: 1 !important;
}
.hexco-modal__total-price {
	font-size: 1.2rem !important;
	font-weight: 800 !important;
	color: var(--hxc-text, #1a1a1a) !important;
	line-height: 1.15 !important;
	display: block !important;
}
.hexco-modal__total-pp {
	font-size: 0.72rem !important;
	color: var(--hxc-muted, #999) !important;
	line-height: 1 !important;
	display: block !important;
}
.hexco-modal__footer-actions {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	flex-shrink: 0 !important;
}
.hexco-modal__cancel {
	padding: 10px 20px !important;
	border: 1.5px solid #ddd !important;
	background: #fff !important;
	color: #555 !important;
	border-radius: 8px !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background .15s, border-color .15s !important;
	font-family: inherit !important;
}
.hexco-modal__cancel:hover {
	background: #f5f5f5 !important;
	border-color: #bbb !important;
}
.hexco-modal__save {
	padding: 10px 26px !important;
	background: var(--hxc-accent, #e2001a) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 0.875rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: opacity .15s !important;
	font-family: inherit !important;
}
.hexco-modal__save:hover {
	opacity: .88 !important;
}
.hexco-modal__save:disabled {
	opacity: .55 !important;
	cursor: not-allowed !important;
}

/* Voorkom scrollen achtergrond terwijl modal open is */
body.hexco-modal-open {
	overflow: hidden !important;
}

@media (max-width: 480px) {
	.hexco-modal__dialog {
		border-radius: 12px 12px 0 0 !important;
		align-self: flex-end !important;
		width: 100% !important;
		max-height: 92dvh !important;
	}
	#hexco-edit-modal {
		align-items: flex-end !important;
		padding: 0 !important;
	}
	@keyframes hexco-modal-in {
		from { transform: translateY(100%); opacity: 0; }
		to   { transform: translateY(0);    opacity: 1; }
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Upsell-blok (tussen bezorgdatum en persoonsgegevens)
   ══════════════════════════════════════════════════════════════════════════ */

body.hexco-checkout-active .hexco-upsell-block {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: linear-gradient(135deg, #fff8f8 0%, #fff 100%);
	border: 2px solid #e2001a20;
	border-radius: 10px;
	padding: 14px 18px;
	margin: 0 0 22px;
}

body.hexco-checkout-active .hexco-upsell-block__text {
	font-size: .95rem;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.3;
}

body.hexco-checkout-active .hexco-upsell-block__text::before {
	content: '🔥 ';
}

body.hexco-checkout-active .hexco-upsell-block__btn {
	flex-shrink: 0;
	background: #e2001a;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 9px 18px;
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s, transform .1s;
	white-space: nowrap;
}

body.hexco-checkout-active .hexco-upsell-block__btn:hover {
	background: #c2001a;
	transform: translateY(-1px);
}

@media (max-width: 600px) {
	body.hexco-checkout-active .hexco-upsell-block {
		flex-direction: column;
		align-items: flex-start;
	}
	body.hexco-checkout-active .hexco-upsell-block__btn {
		width: 100%;
		text-align: center;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Upsell Modal – breed dialoogvenster
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes hexco-modal-fadein {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: scale(1); }
}

#hexco-upsell-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

#hexco-upsell-modal[hidden] {
	display: none !important;
}

#hexco-upsell-modal .hexco-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .52);
	backdrop-filter: blur(3px);
}

#hexco-upsell-modal .hexco-modal__dialog--wide {
	position: relative;
	width: 100%;
	max-width: 760px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
	overflow: hidden;
	animation: hexco-modal-fadein .2s ease;
}

/* Upsell Modal header */
#hexco-upsell-modal .hexco-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 22px 14px;
	border-bottom: 1px solid #f0f0f0;
	flex-shrink: 0;
}

#hexco-upsell-modal .hexco-modal__header h2 {
	font-size: 0.9rem !important;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
}

/* Scrollbaar modal-lichaam */
#hexco-upsell-modal .hexco-modal__body {
	overflow-y: auto;
	padding: 20px 22px;
	flex: 1 1 auto;
}

/* ── Upsell modal: tag-navigatie ─────────────────────────────────────── */

.hexco-upsell__tags {
	margin: 0 0 12px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hexco-upsell__tags-list {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0 0 6px;
	white-space: nowrap;
}

.hexco-upsell__tags-item {
	flex-shrink: 0;
}

.hexco-upsell__tags-btn {
	display: inline-block;
	padding: 6px 16px;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.3;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: #fff;
	color: #333;
	cursor: pointer;
	transition: all .15s ease;
	white-space: nowrap;
}

.hexco-upsell__tags-btn:hover {
	border-color: #e2001a;
	color: #e2001a;
}

.hexco-upsell__tags-item--active .hexco-upsell__tags-btn {
	background: #e2001a;
	border-color: #e2001a;
	color: #fff;
}

/* ── Filter pills in upsell modal ───────────────────────────────────── */
.hexco-upsell__filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
}

.hexco-upsell__filter-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.3;
	border: 1.5px solid #e0e0e0;
	border-radius: 18px;
	background: #fff;
	color: #555;
	cursor: pointer;
	transition: all .15s ease;
	white-space: nowrap;
}

.hexco-upsell__filter-pill:hover {
	border-color: #e2001a;
	color: #e2001a;
}

.hexco-upsell__filter-pill--active {
	background: #e2001a !important;
	border-color: #e2001a !important;
	color: #fff !important;
}

/* ── Stap 1: productenraster ─────────────────────────────────────────── */

.hexco-upsell__grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hexco-upsell__card.hexco-upsell__card--hidden {
	display: none !important;
}

.hexco-upsell__card {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 12px !important;
	border: 1.5px solid #eee !important;
	border-radius: 8px !important;
	background: #fff !important;
	transition: box-shadow .15s, border-color .15s !important;
}

.hexco-upsell__card:hover {
	border-color: #e2001a40 !important;
	box-shadow: 0 2px 12px rgba(226, 0, 26, .08) !important;
}

.hexco-upsell__card-img {
	flex-shrink: 0 !important;
	width: 60px !important;
	height: 60px !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	background: #f3f3f3 !important;
}

.hexco-upsell__card-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.hexco-upsell__card-info {
	flex: 1 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.hexco-upsell__card-title {
	font-size: .82rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}

.hexco-upsell__card-desc {
	font-size: .73rem !important;
	color: #666 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
}

.hexco-upsell__card-price {
	display: block !important;
	font-size: .8rem !important;
	font-weight: 700 !important;
	color: #e2001a !important;
	margin: 0 !important;
}

/* Acties: counter (verborgen) + ronde + knop */
.hexco-upsell__card-actions {
	flex-shrink: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 6px !important;
}

/* Counter: schuift in van rechts wanneer qty > 0 */
.hexco-upsell__counter {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 6px !important;
	overflow: hidden !important;
	max-width: 0 !important;
	opacity: 0 !important;
	transition: max-width 0.22s ease, opacity 0.18s ease !important;
}

.hexco-upsell__counter.is-visible {
	max-width: 80px !important;
	opacity: 1 !important;
}

.hexco-upsell__qty-display {
	font-size: .9rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	min-width: 16px !important;
	text-align: center !important;
	line-height: 1 !important;
}

/* Ronde knoppen: +, −, samenstellen */
.hexco-upsell__card-btn {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 38px !important;
	height: 30px !important;
	min-width: 30px !important;
	padding: 0 !important;
	background: #1a1a1a !important;
	color: #fff !important;
	border: none !important;
	border-radius: 50% !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background .15s, transform .1s !important;
	box-sizing: border-box !important;
	aspect-ratio: 1 !important;
	margin: 0;
}

.hexco-upsell__card-btn:hover {
	background: #e2001a !important;
	transform: scale(1.1) !important;
}

.hexco-upsell__card-btn.has-qty {
	background: #e2001a !important;
}

.hexco-upsell__card-btn.is-added {
	background: #22a06b !important;
}

/* "−" knop: iets lichter van kleur */
.hexco-upsell__card-btn--minus {
	background: #555 !important;
	font-size: .95rem !important;
}

.hexco-upsell__card-btn--minus:hover {
	background: #e2001a !important;
}

/* Bundle product: brede "Samenstellen →" knop */
.hexco-upsell__card-btn--bundle {
	width: auto !important;
	border-radius: 6px !important;
	padding: 6px 12px !important;
	font-size: .75rem !important;
	white-space: nowrap !important;
	aspect-ratio: unset !important;
}

/* Footer step 1: sluiten links, toevoegen rechts */
.hexco-modal__footer--split {
	justify-content: space-between !important;
}

.hexco-upsell__empty {
	text-align: center;
	color: #999;
	padding: 24px;
}

/* ── Dietary icons in upsell kaarten ─────────────────────────────────── */
.hexco-upsell__card-price {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
    justify-content: space-between;
}

.hexco-upsell__dietary-icons {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
}

.hexco-upsell__dietary-icons .hex-wcb-dietary-icon {
	font-size: 0.72em;
	width: 20px;
	height: 20px;
}

/* ── Stap 2: configuratieformulier ───────────────────────────────────── */

#hexco-upsell-step2 {
	border: none;
	padding: 20px 22px;
}

/* Footer: terug + toevoegen */
#hexco-upsell-foot2 {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 22px 18px;
	border-top: 1px solid #f0f0f0;
	flex-shrink: 0;
}

#hexco-upsell-foot1 {
	padding: 10px 22px 16px;
	border-top: 1px solid #f0f0f0;
	flex-shrink: 0;
}

#hexco-upsell-foot1[hidden],
#hexco-upsell-foot2[hidden] {
	display: none !important;
}

#hexco-upsell-step2[hidden] {
	display: none !important;
}

.hexco-modal__footer--end {
	display: flex;
	justify-content: flex-end;
}

#hexco-upsell-modal .hexco-modal__footer-actions {
	display: flex;
	gap: 10px;
}

#hexco-upsell-modal .hexco-modal__footer-actions > * {
	flex: 1;
}

/* Upsell modal - foutmelding */
.hexco-modal__error {
	background: #fff0f0;
	border: 1px solid #fca5a5;
	border-radius: 6px;
	padding: 10px 14px;
	color: #b91c1c;
	font-size: .85rem;
	margin-bottom: 12px;
}

@media (max-width: 600px) {
	#hexco-upsell-modal {
		align-items: flex-end;
		padding: 0;
	}
	#hexco-upsell-modal .hexco-modal__dialog--wide {
		border-radius: 14px 14px 0 0;
		max-height: 92vh;
		animation: hexco-modal-in .25s ease;
	}
}

/* ── Multi-slot modal – bundle & salade slots ──────────────────────── */

.hexco-slots-section {
	margin-bottom: 16px;
}

.hexco-slots-section > .hex-wcb-step-label {
	display: block;
	font-weight: 700;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #666;
	margin-bottom: 6px;
}

.hexco-bundle-slot,
.hexco-salade-slot {
	margin-bottom: 6px;
}

/* Trigger: kolom-layout zodat de persons-stepper eronder past */
.hexco-bundle-slot .hex-wcb-card-dropdown__trigger,
.hexco-salade-slot .hex-wcb-card-dropdown__trigger {
	flex-direction: column !important;
	align-items: stretch !important;
	position: relative !important;
	padding-right: 32px !important;
	cursor: pointer;
}

/* Chevron rechts-boven */
.hexco-bundle-slot .hex-wcb-card-dropdown__chevron,
.hexco-salade-slot .hex-wcb-card-dropdown__chevron {
	position: absolute !important;
	top: 12px !important;
	right: 10px !important;
}

/* Persons stepper in trigger */
.hexco-slot-persons {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 6px 0 2px;
	border-top: 1px solid #e5e7eb;
	margin-top: 4px;
}

/* Verberg persons stepper als geen selectie */
.hexco-bundle-slot .hex-wcb-card-dropdown__trigger:not(.has-selection) .hexco-slot-persons,
.hexco-salade-slot .hex-wcb-card-dropdown__trigger:not(.has-selection) .hexco-slot-persons {
	display: none !important;
}

/* "Nog een pakket/salade" knop */
.hexco-add-slot-btn {
	display: block;
	width: 100%;
	margin-top: 8px;
	background: transparent;
	border: 1.5px dashed #d4d4d4;
	border-radius: 8px;
	padding: 9px 14px;
	font-size: .8rem;
	font-weight: 600;
	color: #666;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s, color .15s;
}

.hexco-add-slot-btn:hover {
	border-color: #e2001a;
	color: #e2001a;
}

/* "Verwijder pakket/salade" kaart in dropdown */
.hex-wcb-card-option--remove {
	border-top: 1px solid #f0f0f0 !important;
	cursor: pointer;
}

.hex-wcb-card-option--remove .hex-wcb-card-option__title {
	color: #e2001a !important;
	font-size: .85rem;
}

.hex-wcb-card-option--remove:hover {
	background: #fff0f0 !important;
}
#jckwds-delivery-date-wrapper, #jckwds-delivery-time-wrapper {
    width: 100%;
}
@media screen and (min-width: 600px) {
	.iconic-wds-fields__fields {
		display: flex !important;
		flex-direction: row;
		width: 100%;
		column-gap: 10px;
	}
}

/* ── Checkout quantity stepper (ronde knoppen, zelfde stijl als upsell) ── */
body.hexco-checkout-active .hexco-qty-stepper {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	border: none !important;
	background: none !important;
	margin-top: 4px !important;
}

body.hexco-checkout-active .hexco-qty-btn {
	flex-shrink: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 28px !important;
	min-width: 28px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background .15s, transform .1s !important;
	box-shadow: none !important;
	aspect-ratio: 1 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

body.hexco-checkout-active .hexco-qty-min {
	background: #555 !important;
	color: #fff !important;
}

body.hexco-checkout-active .hexco-qty-plus {
	background: #e2001a !important;
	color: #fff !important;
}

body.hexco-checkout-active .hexco-qty-btn:hover {
	background: #1a1a1a !important;
	transform: scale(1.1) !important;
}

body.hexco-checkout-active .hexco-qty-btn:disabled {
	opacity: .35 !important;
	cursor: default !important;
	pointer-events: none !important;
	transform: none !important;
}

body.hexco-checkout-active .hexco-qty-val {
	min-width: 18px !important;
	text-align: center !important;
	font-size: .85rem !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
	border: none !important;
	padding: 0 !important;
	line-height: 1 !important;
}