/* Checkout Shipping Title — styles for the markup this plugin appends to shipping labels.
   Loaded on cart and checkout. Anything that targets the checkout theme's own DOM
   (selected-row tint, etc.) belongs in that theme's custom CSS, not here. */

.csn-title {
	display: inline-block;
	min-width: 11.5em; /* clears "Next Day Air by noon" so promises line up */
}

.csn-eta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 1 1 auto;
	margin-right: auto;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.2;
	white-space: nowrap;
}

.csn-eta__icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.csn-eta--estimated {
	color: #5f5f5a;
}

.csn-eta--guaranteed {
	color: #186b45;
}

.csn-free {
	font-weight: 500;
}

/* Phones and small tablets (anything under 768px CSS width — this includes the
   Pro Max / Pixel Pro class at 430–448px, which the old 419px breakpoint missed).
   One line can't hold title + promise + price, so:
     line 1: title and price
     line 2: promise, indented to clear the radio button
   The title is pinned to one line so flex can't shrink it to its longest word. */
@media (max-width: 767px) {
	/* Let the row wrap, whatever container CheckoutWC uses for the label. */
	label:has(> .csn-eta),
	label:has(.csn-eta) {
		flex-wrap: wrap;
	}

	.csn-title {
		display: inline-block;
		min-width: 0;
		flex: 0 1 auto;
		white-space: nowrap;
	}

	.csn-eta {
		display: flex;
		flex: 0 0 100%;
		width: 100%;
		order: 10;
		margin: 4px 0 0;
		padding-left: 27px;
	}
}


/* ---------------------------------------------------------------------------
   Cart page (stock WooCommerce / theme template, e.g. Flatsome).
   The plugin emits a different shape here:
     <span class="csn-cart-row"><span class="csn-title">Standard</span><span class="csn-cart-price">$3.99</span></span>
     <span class="csn-eta csn-eta--block">…</span>
   --------------------------------------------------------------------------- */
.csn-cart-row {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.csn-cart-row .csn-title {
	display: inline;
	min-width: 0;
	white-space: normal;
}

.csn-cart-price {
	font-weight: 600;
}

/* Promise on its own line under the name, regardless of screen width. */
.csn-eta--block {
	display: flex;
	flex: none;
	width: 100%;
	margin: 3px 0 0;
	padding-left: 0;
	order: 0;
}