/* The courier's options at the cart and checkout: logo and name side by side, the promise on a quieter
   second line under the name. Themes give every image "height: auto" with more specificity than a
   class; the logo's size has to win over that. */

/* Every option's radio in the classic list, the courier's or not, centred on the first line of its
   label rather than pinned to the top of the row with WooCommerce's 3px, a margin sized for smaller
   type than themes set today. Nothing else about another method's row is touched. */
ul#shipping_method li > input.shipping_method {
	vertical-align: middle !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* The classic cart and checkout list each option as a radio button followed by its label. A label
   holding a logo and two lines is wider than the room left beside the radio, so on its own it would
   drop under it. The row is laid out as one line instead: the radio, then the label beside it, the
   radio level with the name's first line. Only rows holding a SendGround option are touched. */
ul#shipping_method li:has(> label .sendground-rate) {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	padding: 0.2em 0;
}

/* The radio keeps the browser's own size, the size of every other option's radio in the list, and is
   centred on the name's line: half that line (1.4em, in the row's type size) less half a native
   radio, 13px in every current browser. */
ul#shipping_method li:has(> label .sendground-rate) > input.shipping_method {
	flex: 0 0 auto;
	font-size: inherit;
	margin: calc(0.7em - 6.5px) 0 0 !important;
	cursor: pointer;
}

ul#shipping_method li:has(> label .sendground-rate) > label {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	cursor: pointer;
}

.sendground-rate {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5em;
	max-width: 100%;
	vertical-align: top;
	text-align: left;
}

/* The logo's box is exactly one line of the name, so it sits centred on that line — the line the
   radio button is centred on too. The image floats inside the box, centred, a little smaller. */
.sendground-rate-logo,
.wc-block-components-radio-control__label .sendground-rate-logo,
.woocommerce-checkout .sendground-rate-logo {
	display: block !important;
	flex: 0 0 auto !important;
	box-sizing: border-box !important;
	height: 1.4em !important;
	width: auto !important;
	max-width: 6em !important;
	margin: 0 !important;
	padding: 0.12em 0 !important;
	object-fit: contain;
	object-position: left center;
}

.sendground-rate-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

/* The name, and at the end of its line the price, when the label carries one (the classic cart and
   checkout write it into the label; the block checkout draws it in a column of its own). */
.sendground-rate-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	line-height: 1.4;
	font-weight: 500;
}

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

.sendground-rate-promise {
	display: block;
	margin-top: 0.15em;
	font-size: 0.875em;
	line-height: 1.35;
	color: #6b7280;
}