/**
 * Makes the delivery / collection choice impossible to miss, on both the
 * cart and the checkout, and styles the collection date and time block.
 *
 * WooCommerce renders the shipping options as a plain radio list tucked into
 * the totals table. Here they become large cards, so a customer cannot order
 * for collection without noticing that is what they chose.
 */

.woocommerce-shipping-totals th,
.woocommerce-shipping-totals td,
.shipping th,
.shipping td {
	vertical-align: top;
}

.woocommerce-shipping-totals th,
.shipping th {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding-top: 20px;
}

ul#shipping_method,
ul.woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul#shipping_method li,
ul.woocommerce-shipping-methods li {
	margin: 0 0 10px;
	padding: 0;
	text-align: left;
}

ul#shipping_method li:last-child,
ul.woocommerce-shipping-methods li:last-child {
	margin-bottom: 0;
}

/* Hide the radio itself; the label becomes the control. */
ul#shipping_method li input.shipping_method,
ul.woocommerce-shipping-methods li input.shipping_method {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

ul#shipping_method li label,
ul.woocommerce-shipping-methods li label {
	display: block;
	position: relative;
	margin: 0;
	padding: 15px 16px 15px 50px;
	border: 2px solid #dcdcdc;
	border-radius: 8px;
	background: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #333;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

ul#shipping_method li label:hover,
ul.woocommerce-shipping-methods li label:hover {
	border-color: #b7cf8e;
}

/* The circle that stands in for the radio. */
ul#shipping_method li label::before,
ul.woocommerce-shipping-methods li label::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	border: 2px solid #bfbfbf;
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
}

ul#shipping_method li input.shipping_method:checked + label,
ul.woocommerce-shipping-methods li input.shipping_method:checked + label {
	border-color: #83b735;
	background: #f5faec;
	color: #2f4d0d;
}

ul#shipping_method li input.shipping_method:checked + label::before,
ul.woocommerce-shipping-methods li input.shipping_method:checked + label::before {
	border-color: #83b735;
	box-shadow: inset 0 0 0 5px #83b735;
}

ul#shipping_method li input.shipping_method:focus + label,
ul.woocommerce-shipping-methods li input.shipping_method:focus + label {
	outline: 2px solid #83b735;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Collection date and time
 * ---------------------------------------------------------------------- */

.zaiqa-pickup-slot {
	clear: both;
	margin: 22px 0 24px;
	padding: 18px 20px 20px;
	border: 2px solid #83b735;
	border-radius: 8px;
	background: #f9fcf3;
	overflow: hidden;
}

.zaiqa-pickup-slot h3 {
	margin: 0 0 4px;
	padding: 0;
	font-size: 17px;
	line-height: 1.3;
}

.zaiqa-pickup-slot .zaiqa-pickup-intro {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.4;
	color: #5a5a5a;
}

/* Two columns without relying on WooCommerce's floats, which broke out
   of the box and cut through the border. */
.zaiqa-pickup-slot .zaiqa-pickup-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.zaiqa-pickup-slot .zaiqa-pickup-fields .form-row {
	flex: 1 1 200px;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.zaiqa-pickup-slot .zaiqa-pickup-fields label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.zaiqa-pickup-slot .zaiqa-pickup-fields select {
	width: 100%;
	max-width: 100%;
}

/*
 * WooCommerce marks these fields "(optional)" because they are not required
 * of everyone — only of customers collecting. For those customers they are
 * mandatory, so the word would be misleading.
 */
.zaiqa-pickup-slot .optional {
	display: none;
}

@media ( max-width: 768px ) {
	ul#shipping_method li label,
	ul.woocommerce-shipping-methods li label {
		font-size: 15px;
		padding: 14px 14px 14px 46px;
	}

	.zaiqa-pickup-slot .zaiqa-pickup-fields {
		flex-direction: column;
		gap: 12px;
	}
}