/**
 * §2.1 "Uber-for-couriers style picker" layout, classic checkout only
 * (the site's actual WooCommerce checkout page — wc_get_page_id('checkout')
 * — is the classic [woocommerce_checkout] shortcode, confirmed live; the
 * Blocks-based /checkout-2/ page some earlier testing hit is a separate,
 * unused page). Scoped to the shipping methods list and the surrounding
 * two-column layout only — never touches WooCommerce's own radio
 * input/label structure or #order_review's fragment markup, only how
 * it's visually arranged, so nothing here can break checkout's own
 * totals-recalculation JS (which reads the actual <input>/<label>
 * elements, not their layout).
 */

/* ---------------------------------------------------------------------
 * Field validation feedback. WooCommerce core's own checkout.js already
 * toggles .woocommerce-invalid / .woocommerce-validated on each
 * .form-row and inserts a <p class="checkout-inline-error-message">
 * under the offending field — this just makes that existing, native
 * mechanism visible and clear instead of near-invisible default theme
 * styling. No new validation logic here, only styling of classes
 * WooCommerce already applies on its own.
 * ------------------------------------------------------------------- */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
	border-color: #c0392b !important;
	background-color: #fdf1f0;
}

.woocommerce-checkout .form-row.woocommerce-invalid label {
	color: #c0392b;
}

.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout .form-row.woocommerce-validated select,
.woocommerce-checkout .form-row.woocommerce-validated .select2-selection {
	border-color: #2e7d32 !important;
}

.woocommerce-checkout .checkout-inline-error-message {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #c0392b;
}

.woocommerce-checkout .form-row .required {
	color: #c0392b;
	text-decoration: none;
}

.woocommerce-checkout .form-row .description {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7280;
}

/* ---------------------------------------------------------------------
 * Desktop two-column layout with a sticky order-review column.
 * form.checkout's direct children, in DOM order, are always
 * .col2-set (billing/shipping fields), #order_review_heading, then
 * #order_review — a CSS grid over those three lets the right column
 * (heading + review) stay pinned while the left column (address forms,
 * often taller) scrolls normally, without touching any markup.
 * ------------------------------------------------------------------- */
@media screen and (min-width: 900px) {
	form.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
		grid-template-rows: auto 1fr;
		column-gap: 48px;
		align-items: start;
	}

	/* Elementor's page-wide styles float these elements left/right by
	 * default, which makes a grid item shrink-to-fit its content instead
	 * of stretching to fill its track — float:none restores normal grid
	 * sizing without touching the .col-1/.col-2 floats *inside*
	 * .col2-set, which still need their own side-by-side float layout. */
	form.woocommerce-checkout .col2-set#customer_details,
	form.woocommerce-checkout #order_review_heading,
	form.woocommerce-checkout #order_review {
		float: none;
		width: auto;
	}

	form.woocommerce-checkout .col2-set#customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	form.woocommerce-checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	form.woocommerce-checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: 24px;
	}
}

/* ---------------------------------------------------------------------
 * Full-width shipment section. A <tr> inside <tfoot> can't reliably be
 * forced to span the full table width via display:block — browsers
 * still size a table-model row by content (shrink-to-fit) in that
 * context, confirmed live (width stuck at ~65% of the table even with
 * display:block !important). checkout.js physically MOVES the real
 * <ul id="shipping_method"> (and the controls row's contents) out of
 * the table into this plain wrapper div right after it — same actual
 * DOM nodes, so the radio inputs WooCommerce's own AJAX totals logic
 * reads keep working unchanged; only their position in the page moves,
 * done on every fragment refresh since WooCommerce replaces the whole
 * <table> each time.
 * ------------------------------------------------------------------- */
.tsp-shipping-wrapper {
	margin: 16px 0;
	width: 100%;
}

.tsp-shipping-heading {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

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

ul#shipping_method.woocommerce-shipping-methods li {
	border: 1px solid #e2e2e2;
	border-radius: 10px;
	margin-bottom: 8px;
	padding: 12px 14px;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

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

ul#shipping_method.woocommerce-shipping-methods li:has(input:checked) {
	border-color: #111;
	background: #fafafa;
	box-shadow: 0 0 0 1px #111;
}

/* Hidden by checkout.js while a carrier is selected and the list is
 * collapsed — CSS only supplies the mechanism, JS decides when. */
ul#shipping_method.woocommerce-shipping-methods li.tsp-rate-hidden {
	display: none;
}

/* ---------------------------------------------------------------------
 * Modern radio styling — the default browser radio read as "terrible"
 * against the rest of this card design. Custom-painted circle, same
 * click target (the real <input> stays functional and accessible,
 * just visually replaced).
 * ------------------------------------------------------------------- */
ul#shipping_method.woocommerce-shipping-methods li input.shipping_method[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0 12px 0 0;
	border: 2px solid #ccc;
	border-radius: 50%;
	flex: 0 0 auto;
	position: relative;
	cursor: pointer;
	vertical-align: middle;
	transition: border-color 0.15s ease;
}

ul#shipping_method.woocommerce-shipping-methods li input.shipping_method[type="radio"]:hover {
	border-color: #999;
}

ul#shipping_method.woocommerce-shipping-methods li input.shipping_method[type="radio"]:checked {
	border-color: #111;
}

ul#shipping_method.woocommerce-shipping-methods li input.shipping_method[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #111;
}

ul#shipping_method.woocommerce-shipping-methods li input.shipping_method[type="radio"]:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

ul#shipping_method.woocommerce-shipping-methods li label {
	display: flex;
	align-items: center;
	width: 100%;
	cursor: pointer;
}

.tsp-rate-row {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 10px;
	flex-wrap: wrap;
}

.tsp-rate-logo {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	object-fit: contain;
	border-radius: 4px;
	background: #fff;
}

.tsp-rate-details {
	flex: 1 1 160px;
	min-width: 0;
}

.tsp-rate-name {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	overflow-wrap: break-word;
}

.tsp-rate-eta {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #6b7280;
}

.tsp-rate-note {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #b45309;
}

.tsp-rate-price {
	flex: 0 0 auto;
	font-weight: 600;
	white-space: nowrap;
	margin-left: auto;
}

/* ---------------------------------------------------------------------
 * Controls row: Select new carrier / Refresh rates.
 * ------------------------------------------------------------------- */
.tsp-shipping-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 10px;
}

.tsp-shipping-controls .button {
	border-radius: 8px;
	font-size: 13px;
	padding: 8px 14px;
}

.tsp-shipping-controls .tsp-select-new-carrier {
	background: #fff;
	border: 1px solid #111;
	color: #111;
}

.tsp-shipping-controls .tsp-refresh-rates {
	background: #111;
	border: 1px solid #111;
	color: #fff;
}

.tsp-refresh-rates-spinner {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid #ccc;
	border-top-color: #111;
	border-radius: 50%;
	vertical-align: middle;
	animation: tsp-spin 0.7s linear infinite;
}

@keyframes tsp-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------------------------------------------------------------------
 * Mobile / tablet — stacked layout, larger tap targets, no
 * horizontal scroll, buttons full-width for easy thumb reach.
 * ------------------------------------------------------------------- */
@media screen and (max-width: 899px) {
	form.woocommerce-checkout .col2-set#customer_details,
	form.woocommerce-checkout #order_review_heading,
	form.woocommerce-checkout #order_review {
		width: 100%;
	}
}

@media screen and (max-width: 600px) {
	ul#shipping_method.woocommerce-shipping-methods li {
		padding: 14px 12px;
	}

	ul#shipping_method.woocommerce-shipping-methods li label {
		align-items: flex-start;
	}

	ul#shipping_method.woocommerce-shipping-methods li input.shipping_method[type="radio"] {
		width: 22px;
		height: 22px;
		margin-top: 2px;
	}

	.tsp-rate-row {
		gap: 8px 12px;
	}

	.tsp-rate-price {
		margin-left: 40px;
		font-size: 15px;
	}

	.tsp-shipping-controls {
		flex-direction: column;
		align-items: stretch;
	}

	.tsp-shipping-controls .button {
		width: 100%;
		text-align: center;
		padding: 12px 14px;
		font-size: 14px;
	}
}