/* -----------------------------------------------------------------------
 * Shipping selection — clickable service boxes (basket + checkout)
 * Replaces the default radio list. See inc/shipping-selection.php and
 * woocommerce/cart/cart-shipping.php.
 *
 * NOTE: WooCommerce core and the theme style `#shipping_method` (ID) and
 * `input[type=radio]` aggressively, so selectors here are scoped through the
 * `#shipping_method` id and use !important on the essentials to win.
 * --------------------------------------------------------------------- */

.woocommerce-shipping-totals.shipping td {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* The grid of boxes ---------------------------------------------------- */
ul#shipping_method.ukc-shipping-methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	/* Fixed-width cards (never stretch to full width) so the boxes are the
	   same size on the basket and the checkout; they simply wrap to fewer
	   columns in a narrower container. */
	grid-template-columns: repeat(auto-fit, minmax(160px, 200px));
	justify-content: start;
	gap: 10px;
	font-family: inherit;
}

ul#shipping_method.ukc-shipping-methods li.ukc-shipping-option {
	list-style: none !important;
	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0 !important;
}

/* Hide the real radio — override themed/floated radios completely -------- */
ul#shipping_method.ukc-shipping-methods .ukc-shipping-radio,
#shipping_method .ukc-shipping-radio {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	float: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
	background: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* The clickable box ---------------------------------------------------- */
#shipping_method .ukc-shipping-box {
	position: relative !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 120px;
	margin: 0 !important;
	text-align: center;
	text-indent: 0 !important;
	gap: 8px;
	padding: 16px 14px !important;
	border: 2px solid #d5d9e2;
	border-radius: 8px;
	background: #fff;
	color: #333;
	line-height: 1.3 !important;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#shipping_method .ukc-shipping-box:hover {
	border-color: #1e428b;
	box-shadow: 0 2px 8px rgba(30, 66, 139, 0.15);
}

#shipping_method .ukc-shipping-icon {
	display: block;
	font-size: 28px;
	line-height: 1;
	color: #1e428b;
	flex: 0 0 auto;
}

#shipping_method .ukc-shipping-icon i {
	color: #1e428b;
}

#shipping_method .ukc-shipping-detail {
	display: block;
	min-width: 0;
}

#shipping_method .ukc-shipping-name {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: #333;
	line-height: 1.3;
}

#shipping_method .ukc-shipping-note {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 400;
	color: #6a7280;
	line-height: 1.3;
}

/* Tick badge shown when selected --------------------------------------- */
#shipping_method .ukc-shipping-check {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #1e428b;
	color: #fff;
	font-size: 11px;
	line-height: 20px;
	text-align: center;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Selected state — :has() with .is-selected fallback ------------------- */
#shipping_method .ukc-shipping-option:has(.ukc-shipping-radio:checked) .ukc-shipping-box,
#shipping_method .ukc-shipping-option.is-selected .ukc-shipping-box {
	border-color: #1e428b;
	background: #f3f6fc;
	box-shadow: 0 2px 10px rgba(30, 66, 139, 0.2);
}

#shipping_method .ukc-shipping-option:has(.ukc-shipping-radio:checked) .ukc-shipping-check,
#shipping_method .ukc-shipping-option.is-selected .ukc-shipping-check {
	opacity: 1;
	transform: scale(1);
}

.ukc-shipping-radio:focus-visible + .ukc-shipping-box {
	outline: 2px solid #1e428b;
	outline-offset: 2px;
}

/* Checkout: WooCommerce right-aligns totals cells; keep the boxes left-aligned
   so they sit directly under the "Shipping" label like on the basket. */
.woocommerce-checkout .woocommerce-shipping-totals.shipping td {
	text-align: left;
}

/* "Please choose an option" notice ------------------------------------- */
.ukc-shipping-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 10px 14px;
	border: 1px solid #f0c36d;
	border-left: 4px solid #e0a800;
	border-radius: 6px;
	background: #fff8e6;
	color: #7a5b00;
	font-size: 14px;
	font-weight: 500;
}

.ukc-shipping-notice[hidden] {
	display: none;
}

.ukc-shipping-notice i {
	color: #e0a800;
}