/**
 * Heeswijk Checkout Styles – Version 2.0
 *
 */

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
	--hw-primary:       #E73F0C;
	--hw-primary-pale:  #fff1ed;
	--hw-primary-faint: rgba(255, 59, 0, 0.07);
	--hw-secondary:     #F39F85;
	--hw-border:        #E4E4E5;
	--hw-border-muted:  #D0C4A5;
	--hw-bg:            #F7F4F0;
	--hw-card:          #FFFFFF;
	--hw-text:          #1A1A1A;
	--hw-muted:         #6B7280;
	--hw-success:       #1a7f37;
	--hw-success-bg:    #dcfce7;
	--hw-selected:      #2563EB;
	--hw-selected-bg:   #EFF6FF;
	--hw-radius:        12px;
	--hw-shadow:        0 2px 12px rgba(0, 0, 0, 0.07);
}

/* RESET – neutralise WooCommerce & theme float-based layout */

/* WooCommerce default: #customer_details { float:left; width:48% } */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading {
	float: none !important;
	width: auto !important;
	clear: none !important;
}

.woocommerce-checkout-review-order:not(.w-checkout-order-review){
	padding: 0px !important;
}

/* Impreza / Yooker theme column wrappers */
.woocommerce-page .w-checkout-billing,
.woocommerce-page .w-checkout-order-review {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
}

/* Kill any leftover clearfix pseudo-elements on the form */
form.checkout.woocommerce-checkout::after,
form.checkout.woocommerce-checkout::before {
	display: none !important;
}

/* CHECKOUT LAYOUT  (two-column grid) */
.woocommerce-page form.checkout.woocommerce-checkout,
form.checkout.woocommerce-checkout {
	display: grid !important;
	grid-template-columns: 1fr 38%;
	gap: 32px;
	align-items: start;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
}

/* Error / info notices must span both columns so they sit above the layout */
form.checkout.woocommerce-checkout .woocommerce-notices-wrapper,
form.checkout.woocommerce-checkout .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
}

/* Style WooCommerce validation errors to fit the design */
form.checkout.woocommerce-checkout .woocommerce-error {
	list-style: none;
	margin: 0 0 8px;
	padding: 16px 20px;
	background: #fff5f5;
	border: 1px solid #fecaca;
	border-left: 4px solid var(--hw-primary);
	border-radius: var(--hw-radius);
	color: var(--hw-text);
	font-size: 0.9rem;
}

form.checkout.woocommerce-checkout .woocommerce-error li {
	padding: 3px 0;
	color: var(--hw-primary);
	font-weight: 500;
}

form.checkout.woocommerce-checkout .woocommerce-error li a {
	color: var(--hw-primary);
	font-weight: 600;
	text-decoration: none;
}

form.checkout.woocommerce-checkout .woocommerce-error li a:hover {
	text-decoration: underline;
}


.heeswijk-checkout__title {
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0 0 1.5rem;
	color: var(--hw-text);
}

.product_list_checkout_items .cart_item .product-name{
	display: flex;
}

/* ORDER TYPE TOGGLE  (Afhalen / Bezorgen) */
.heeswijk-order-type {
    margin-bottom: 24px;
    width: 100%;
    margin-top: 16px;
}

.heeswijk-order-type__label {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	margin-bottom: 10px;
}

.heeswijk-order-type__buttons {
	display: flex;
	gap: 12px;
}

.heeswijk-order-type__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 15px 28px;
	background: var(--hw-card);
	border: 2px solid var(--hw-border);
	border-radius: 10px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--hw-muted);
	cursor: pointer;
	transition: border-color 0.18s, color 0.18s, background 0.18s;
	line-height: 1;
}

.heeswijk-order-type__btn svg {
	flex-shrink: 0;
}

.heeswijk-order-type__btn:hover:not(.active) {
	border-color: var(--hw-border-muted);
	color: var(--hw-text);
}

.heeswijk-order-type__btn.active {
	border-color: var(--hw-primary);
	color: var(--hw-primary);
	background: var(--hw-primary-pale);
}

/* Delivery unavailable notice (shown when postcode has no delivery zone) */
/* Login notice for guests — above checkout form */
.hw-checkout-login-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--hw-primary-pale);
	border: 1px solid var(--hw-secondary);
	border-radius: var(--hw-radius);
	padding: 14px 18px;
	margin-bottom: 24px;
	font-size: 0.9rem;
	color: var(--hw-text);
}

.hw-checkout-login-notice svg {
	flex-shrink: 0;
	color: var(--hw-primary);
}

.hw-checkout-login-notice__text {
	flex: 1;
	line-height: 1.4;
}

.hw-checkout-login-notice__btn {
	flex-shrink: 0;
	display: inline-block;
	padding: 8px 18px;
	background: var(--hw-primary);
	color: #fff !important;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s;
}

.hw-checkout-login-notice__btn:hover {
	background: #c93409;
	color: #fff !important;
}

/* Inline login form */
.hw-checkout-login-form {
	background: var(--hw-card);
	border: 1px solid var(--hw-border);
	border-top: none;
	border-radius: 0 0 var(--hw-radius) var(--hw-radius);
	padding: 20px 20px 16px;
	margin-top: -20px;
	margin-bottom: 24px;
}

.hw-checkout-login-form__fields {
	display: flex;
	gap: 16px;
	margin-bottom: 12px;
}

.hw-checkout-login-form__field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hw-checkout-login-form__field label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hw-text);
}

.hw-checkout-login-form__field input {
	padding: 9px 12px;
	border: 1px solid var(--hw-border);
	border-radius: 8px;
	font-size: 0.9375rem;
	color: var(--hw-text);
	background: var(--hw-bg);
	transition: border-color 0.15s;
}

.hw-checkout-login-form__field input:focus {
	outline: none;
	border-color: var(--hw-primary);
}

.hw-checkout-login-form__footer {
	display: flex;
	align-items: center;
	gap: 16px;
}

.hw-checkout-login-form__submit {
	padding: 9px 22px;
	background: var(--hw-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.18s;
}

.hw-checkout-login-form__submit:hover:not(:disabled) {
	background: #c93409;
}

.hw-checkout-login-form__submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.hw-checkout-login-form__lost {
	font-size: 0.8125rem;
	color: var(--hw-muted);
}

.hw-checkout-login-form__error {
	margin: 0;
	font-size: 0.875rem;
	color: var(--hw-primary);
	font-weight: 500;
}

@media (max-width: 600px) {
	.hw-checkout-login-form__fields {
		flex-direction: column;
	}
}

.hw-delivery-notice {
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #fff8e6;
	border: 1.5px solid #f0a500;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 0.9rem;
	color: #5a3e00;
	line-height: 1.5;
}

.hw-delivery-notice strong {
	font-weight: 700;
}

.hw-delivery-hint {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	color: var(--hw-muted);
}

/* Hide native WC shipping radios in the order review — toggle above handles selection */
#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout-review-order-table #shipping_method li {
	display: none !important;
}

.woocommerce-checkout-review-order-table #shipping_method input[type="radio"],
.woocommerce-checkout-review-order-table #shipping_method input[type="hidden"] {
	display: none !important;
}

/* Datepicker / pickup cursor */

/* Required asterisk for conditionally-required fields (class added by JS) */
#pickup_location_field.validate-required label::after,
#pickup_date_field.validate-required label::after,
#delivery_date_field.validate-required label::after {
	content: ' *';
}

/* Datepicker inputs */
#delivery_date,
#pickup_date {
	position: relative;
	cursor: pointer;
}

#delivery_time_field {
	display: none !important;
}

/* Hidden delivery_pickup field — do not take up space */
.heeswijk-hidden-field {
	display: none !important;
}

/* ORDER REVIEW COLUMN  (right) */
.heeswijk-checkout__review {
	background: var(--hw-card);
	border-radius: var(--hw-radius);
	padding: 28px;
	box-shadow: var(--hw-shadow);
}

.heeswijk-checkout__review-title {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 20px;
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--hw-text);
}

.heeswijk-cart-count {
	color: var(--hw-muted);
	font-weight: 500;
}

.heeswijk-checkout__review-title {
	cursor: pointer;
	user-select: none;
}

.heeswijk-checkout__review-chevron {
	margin-left: auto;
	flex-shrink: 0;
	color: var(--hw-muted);
	transition: transform 0.2s ease;
}

.heeswijk-checkout__review-chevron.is-collapsed {
	transform: rotate(-90deg);
}

.woocommerce-checkout-payment .payment_box{
	display: none !important;
}
/* LOYALTY POINTS WIDGET  (wc_user_cake shortcode) */
.heeswijk-checkout__review .wc-user-cake_simple {
	margin-bottom: 20px;
}

/* ORDER REVIEW TABLE */		
.woocommerce-checkout-review-order-table {
	display: block;
	width: 100%;
}

.woocommerce-checkout-review-order-table thead {
	display: none;
}

.product_list_checkout_items {
	display: block;
	width: 100%;
}

.woocommerce-checkout-review-order-table tbody tr,
.product_list_checkout_items tr {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 10px 0;
}

/* Product thumbnail in order review */
.hw-review-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hw-review-thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

.hw-review-item__name {
	line-height: 1.4;
}
.hw-review-item__name::first-letter {
    text-transform: uppercase;
}

.hw-review-qty {
	display: inline-block;
	margin-left: 4px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--hw-muted);
}

.woocommerce-checkout-review-order-table tfoot {
	display: block;
	margin-top: 12px;
}

.woocommerce-checkout-review-order-table tfoot tr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total {
	font-weight: 700;
	font-size: 1.05rem;
	padding: 12px 0 8px;
	border-top: 2px solid var(--hw-border);
}

/* Shipping method list in the order review tfoot — hidden input (single method) needs no extra display tweaks */
/* Shipping row: no box — JS sets th label + td value to match table style */
.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping {
	padding: 4px 0;
}

/* Pickup location name shown next to "Afhalen" in the order review */
.hw-shipping-detail {
	display: block;
	font-size: 0.875rem;
	color: var(--hw-muted);
	margin-top: 2px;
}

.hw-shipping-price {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--hw-text);
}

.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal,
.woocommerce-checkout-review-order-table tfoot tr.order-total {
	width: 100%;
}

.product_bestelbaar {
	color: var(--hw-primary);
	font-size: 13px;
	margin-top: 4px;
}

/* PAYMENT METHODS */
#payment {
	background: none;
	padding: 0;
	margin-top: 16px;
}

#payment ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

#payment ul.payment_methods li.wc_payment_method {
	border: 1px solid var(--hw-border);
	border-radius: 10px;
	padding: 12px 16px;
	margin-bottom: 8px;
	cursor: pointer;
	transition: border-color 0.18s;
	box-shadow: none !important;
}

#payment ul.payment_methods li.wc_payment_method:focus-within,
#payment ul.payment_methods li.wc_payment_method:has(input:checked) {
	border-color: #9CA3AF;
	/* background: #ff3b0012; */
}

#payment ul.payment_methods li.wc_payment_method > * {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#payment .payment_method_description {
	margin: 8px 0 0;
	font-size: 0.9rem;
	color: var(--hw-muted);
}

/* PLACE ORDER BUTTON */
#payment #place_order {
	width: 100%;
	background: var(--hw-success) !important;
	color: #fff !important;
	border-color: var(--hw-success) !important;
	padding: 14px 24px !important;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 10px !important;
	cursor: pointer;
	transition: background 0.18s, border-color 0.18s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

#payment #place_order:hover,
#payment #place_order:focus {
	background: #15692e !important;
	border-color: #15692e !important;
}

/* COUPON COLLAPSIBLE  (grid col 2 — outside .heeswijk-checkout__review) */
.heeswijk-checkout__right-col {
	grid-column: 2;
	position: sticky;
	top: 90px;
	align-self: start;
}

.heeswijk-checkout__coupon {
	margin-top: 16px;
background: var(--hw-card);
    border-radius: var(--hw-radius);
    padding: 28px;
    box-shadow: var(--hw-shadow);
}

.heeswijk-checkout__coupon-toggle {
	background: none;
	border: none;
	padding: 0;
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	text-align: left;
	font-weight: 600;
}

.heeswijk-checkout__coupon-toggle:hover {
	color: var(--hw-text);
}

.heeswijk-checkout__coupon-icon {
	margin-left: auto;
	font-size: 1.2rem;
	line-height: 1;
}

.heeswijk-checkout__coupon-form {
	margin-top: 12px;
}

.heeswijk-coupon-wrap {
	display: flex;
	gap: 8px;
}

.heeswijk-coupon__input {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--hw-border);
	border-radius: var(--hw-radius);
	outline: none;
}

.heeswijk-coupon__input:focus {
	border-color: var(--hw-primary);
}

.heeswijk-coupon__submit {
	white-space: nowrap;
	padding: 8px 16px;
	background: var(--hw-primary);
	color: #fff;
	border: none;
	border-radius: var(--hw-radius);
	cursor: pointer;
	font-weight: 600;
}

.heeswijk-coupon__submit:hover {
	background: #c93608;
}

.heeswijk-coupon__feedback {
	margin-top: 8px;
	font-size: 0.875rem;
}

/* SUPPORT LINK */
.heeswijk-checkout__support {
	margin-top: 12px;
	text-align: center;
}

.heeswijk-checkout__support-link {
	font-size: 0.82rem;
	color: var(--hw-muted);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.15s;
}

.heeswijk-checkout__support-link:hover {
	color: var(--hw-primary);
}

/* FORM FIELD LAYOUT  (two-up fields) */
.heeswijk-checkout__billing .woocommerce-billing-fields__field-wrapper,
.heeswijk-checkout__billing .woocommerce-shipping-fields__field-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4%;
}

.heeswijk-checkout__billing .woocommerce-billing-fields__field-wrapper > .form-row,
.heeswijk-checkout__billing .woocommerce-shipping-fields__field-wrapper > .form-row {
	width: 48%;
}

.heeswijk-checkout__billing .form-row.form-row-wide {
	/* width: 100% !important; */
}

#delivery_date_field{
	margin-right: 50%;
}

.heeswijk-checkout__billing .form-row.form-row-first {
	width: 48% !important;
}

.heeswijk-checkout__billing .form-row.form-row-last {
	width: 48% !important;
}

/* Override Impreza w-checkout-billing wrapper */
.woocommerce-page .w-checkout-billing [class*=__field-wrapper] > .form-row {
	width: 48%;
}

.woocommerce-page .w-checkout-billing [class*=__field-wrapper] {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4%;
}

.woocommerce-page .form-row.notes {
	width: 100% !important;
}

p#billing_email_field {
    width: 100%;
}

/* HIDE WC DEFAULTS THAT CLASH WITH FIGMA DESIGN */

/* WooCommerce billing section heading ("Factuurgegevens") */
.woocommerce-billing-fields > h3 {
	display: none !important;
}

/* WC coupon toggle notice above the form (moved to right column) */
.woocommerce-form-coupon-toggle {
	display: none !important;
}


/* MISC CHECKOUT ELEMENTS */

/* WooCommerce notices */
.woocommerce-info,
.woocommerce-message {
	background: rgba(208, 196, 165, 0.34) !important;
}

.woocommerce-info a,
.woocommerce-message a {
	color: var(--color-alt-content-heading, #1A1A1A);
	font-weight: 700;
}

/* Cart subtotals compatibility */
#afrekenen .cart_item:not(:last-child) {
	border-bottom: solid 1px var(--color-content-bg-alt, var(--hw-border));
}

#afrekenen .cart_item > td {
	padding: 0.75rem 0;
}

#afrekenen .wc_payment_method {
	box-shadow: none !important;
}

#afrekenen li.wc_payment_method > * {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Hide COD payment method for delivery (added via JS class) */
.payment_method_cod.hidden {
	display: none !important;
}

/* Cake */
.heeswijk-checkout__review .wc-user-cake {
	border: none !important;
	align-items: center;
}
.heeswijk-checkout__review .wc-user-cake img {
	margin-bottom: 0px !important;
}

/* RESPONSIVE — tablet (≤ 1024px) */
@media screen and (max-width: 1024px) {

	.woocommerce-page form.checkout.woocommerce-checkout,
	form.checkout.woocommerce-checkout {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Right-col wrapper: reset grid placement, flow below billing form */
	.heeswijk-checkout__right-col {
		grid-column: auto;
		position: static;
	}

	.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals.shipping {
		flex-wrap: wrap;
	}
}

/* RESPONSIVE — mobile (≤ 768px) */
@media screen and (max-width: 768px) {

	/* Progress steps: tighten up */
	.heeswijk-checkout-steps {
		padding-top: 20px;
		margin-bottom: 20px;
	}

	.heeswijk-checkout-steps__label {
		font-size: 0.8rem;
	}

	#delivery_date_field{
	margin-right: 0%;
	}

	/* Review + billing cards: less padding */
	.heeswijk-checkout__review,
	.heeswijk-checkout__billing {
		padding: 20px 16px;
		border-radius: 8px;
	}

	/* Toggle: move below billing fields (after email) on mobile */
	.woocommerce-billing-fields {
		display: flex;
		flex-direction: column;
	}

	/* Dissolve the wrapper so all <p> fields become direct flex children */
	.heeswijk-checkout__billing .woocommerce-billing-fields__field-wrapper {
		display: contents;
	}

	/* Pickup/delivery specific fields: full width on mobile */
	#pickup_location_field,
	#pickup_date_field,
	#delivery_date_field {
		width: 100% !important;
	}

	/* Toggle: sits after email in natural DOM order — no CSS order override needed */
	.heeswijk-order-type {
		margin-top: 8px;
		margin-bottom: 20px;
	}

	/* All form fields: full width */
	.heeswijk-checkout__billing .woocommerce-billing-fields__field-wrapper > .form-row,
	.heeswijk-checkout__billing .woocommerce-shipping-fields__field-wrapper > .form-row,
	.heeswijk-checkout__billing .form-row.form-row-wide,
	.heeswijk-checkout__billing .form-row.form-row-first,
	.heeswijk-checkout__billing .form-row.form-row-last {
		width: 100% !important;
	}

	#billing_email_field {
		width: 100% !important;
	}

	/* Shipping table: wrap on small screens */
	.woocommerce-checkout-review-order-table tfoot tr {
		gap: 4px;
	}

	/* Coupon + support: no top spacing needed */
	.heeswijk-checkout__coupon {
		margin-top: 12px;
	}
	
	/* backup velden */
}

/* RESPONSIVE — small mobile (≤ 480px) */
@media screen and (max-width: 480px) {

	/* Neutralise theme negative margin on the order review wrapper */
	.woocommerce-checkout-review-order:not(.w-checkout-order-review) {
		margin: 0 !important;
	}

	/* Shrink step icons */
	.heeswijk-checkout-steps__icon {
		width: 32px;
		height: 32px;
		font-size: 0.875rem;
	}

	.heeswijk-checkout-steps__step::before {
		top: 15px;
	}

	/* Toggle buttons: stretch to fill row */
	.heeswijk-order-type__btn {
		flex: 1;
		justify-content: center;
	}

	/* Review card: tighter */
	.heeswijk-checkout__review,
	.heeswijk-checkout__billing {
		padding: 16px 14px;
	}

	/* Pickup/delivery card — stack vertically */
	#pickup_location_field::before {
		right: 0;
		bottom: -18px;
		border-right: 1px solid var(--hw-border-muted);
		border-bottom: none;
		border-radius: var(--hw-radius) var(--hw-radius) 0 0;
	}

	#pickup_date_field::before {
		top: 0;
		border-left: 1px solid var(--hw-border-muted);
		border-top: none;
		border-radius: 0 0 var(--hw-radius) var(--hw-radius);
	}

	/* Place order button: slightly smaller text */
	#payment #place_order {
		font-size: 0.9375rem;
		padding: 13px 20px !important;
	}
}

/* LOYALTY NOTICE */
.hw-loyalty-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgb(255 255 255);
    border: 1.5px solid #e73f0c2e;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 20px;
}
.hw-loyalty-notice__icon {
	flex-shrink: 0;
	font-size: 1rem;
	margin-top: 2px;
	color: #E73F0C;
}