/*
 * WooCommerce Shipping Subsidy Manager — Frontend Styles
 * CSS custom properties are injected inline from PHP (appearance settings).
 *
 * Layout approach:
 * WooCommerce renders shipping methods inside <ul id="shipping_method"> <li> <label> elements.
 * The label is display:block and takes the full available width after the radio button.
 * All our label wrappers must work correctly inside this flow.
 */

/* ── Variables & Reset ─────────────────────────────────────────────────── */
:root {
	--wcss-primary:     #2271b1;
	--wcss-secondary:   #135e96;
	--wcss-badge-color: #00a32a;
	--wcss-radius:      6px;
	--wcss-font-size:   14px;
}

.wcss-label,
.wcss-label *,
.wcss-notice,
.wcss-notice * {
	box-sizing: border-box;
}

/* ── Icon ──────────────────────────────────────────────────────────────── */
.wcss-icon {
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	height: 1em;
	margin-right: 5px;
	color: var(--wcss-primary);
	flex-shrink: 0;
	position: relative;
	top: -1px;
}

/* ── Badge ─────────────────────────────────────────────────────────────── */
.wcss-badge {
	display: inline-block;
	background: var(--wcss-badge-color);
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1;
	padding: 3px 8px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-left: 6px;
	vertical-align: middle;
	white-space: nowrap;width: 85px;
}

/* ── Strikethrough ─────────────────────────────────────────────────────── */
del.wcss-label__original {
	color: #999;
	text-decoration: line-through;
	font-size: 0.9em;
}

/* ══════════════════════════════════════════════════════════════════════════
   STANDARD STYLE
   One line: Method Name  ~~$66.10~~  $33.05  [badge]
   ══════════════════════════════════════════════════════════════════════════ */
.wcss-label--standard {
	display: inline;
	font-size: var(--wcss-font-size);
}

.wcss-label--standard .wcss-label__name {
	font-weight: 500;
}

.wcss-label--standard del.wcss-label__original {
	margin: 0 4px;
}

.wcss-label--standard .wcss-label__price {
	font-weight: 700;
	color: var(--wcss-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM STYLE
   Block layout with labelled rows — works inside WC's <label> block context.
   ══════════════════════════════════════════════════════════════════════════ */
.wcss-label--premium {
	display: block;
	font-size: var(--wcss-font-size);
	margin-top: 2px;
}

.wcss-label--premium .wcss-label__name {
	font-weight: 600;
	font-size: 1em;
	align-items: center;
	margin-bottom: 6px;
}

/* The rows table */
.wcss-label--premium .wcss-label__rows {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

.wcss-label--premium .wcss-label__row {
	display: table-row;
}

.wcss-label--premium .wcss-label__row-label,
.wcss-label--premium .wcss-label__row del,
.wcss-label--premium .wcss-label__row .wcss-label__savings,
.wcss-label--premium .wcss-label__row .wcss-label__price {
	display: table-cell;
	padding: 1px 8px 1px 0;
	vertical-align: middle;
	white-space: nowrap;
}

.wcss-label--premium .wcss-label__row-label {
	color: #666;
	font-size: 0.88em;
	min-width: 80px;
}

/* Right-align the value cells */
.wcss-label--premium .wcss-label__row del,
.wcss-label--premium .wcss-label__row .wcss-label__savings,
.wcss-label--premium .wcss-label__row .wcss-label__price {
	text-align: right;
	padding-right: 0;
}

.wcss-label--premium .wcss-label__row--savings .wcss-label__savings {
	color: var(--wcss-badge-color);
	font-weight: 600;
}

.wcss-label--premium .wcss-label__row--pay .wcss-label__price {
	color: var(--wcss-primary);
	font-weight: 700;
}

/* Badge sits below the rows */
.wcss-label--premium .wcss-badge {
	display: inline-block;
	margin-top: 6px;
	margin-left: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPACT STYLE
   Inline: Method Name  $33.05  [SAVE $33.05 pill]
   ══════════════════════════════════════════════════════════════════════════ */
.wcss-label--compact {
	display: inline;
	font-size: var(--wcss-font-size);
}

.wcss-label--compact .wcss-label__name {
	font-weight: 500;
}

.wcss-label--compact .wcss-label__price {
	font-weight: 700;
	color: var(--wcss-primary);
	margin-left: 4px;
}

.wcss-label--compact .wcss-label__savings-pill {
	display: inline-block;
	background: var(--wcss-badge-color);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-left: 6px;
	vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════════
   NOTICE
   ══════════════════════════════════════════════════════════════════════════ */
.wcss-notice {
	background: #f0f6ff;
	border: 1px solid #b3d1f0;
	border-left: 4px solid var(--wcss-primary);
	border-radius: var(--wcss-radius);
	padding: 12px 16px;
	margin: 0 0 16px 0;
	font-size: var(--wcss-font-size);
	clear: both;
}

.wcss-notice__inner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.wcss-notice__inner .wcss-icon {
	margin-right: 0;
	margin-top: 1px;
	flex-shrink: 0;
}

.wcss-notice__content {
	flex: 1;
	line-height: 1.5;
	color: #1d2327;
}

.wcss-notice__content strong {
	display: block;
	margin-bottom: 2px;
	color: var(--wcss-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   WooCommerce CHECKOUT INTEGRATION
   Override WC's shipping list styles to accommodate our wider content
   ══════════════════════════════════════════════════════════════════════════ */

/* WC checkout: #order_review .shipping-methods li
   WC cart: .woocommerce-shipping-methods li
   Both wrap: <input type="radio"> <label for="...">OUR_HTML</label>       */

/* Make the list items accommodate block-level label content */
#shipping_method li,
.woocommerce-shipping-methods li {
	padding: 2px 0;
}

/* Ensure labels take full width and allow our block content to flow */
#shipping_method li label,
.woocommerce-shipping-methods li label {
	display: inline-block;  /* stay inline with radio, but allow block children */
	vertical-align: top;
	max-width: calc(100% - 28px); /* leave room for the radio button */
	cursor: pointer;
}

/* Premium label: needs to be block inside the label */
#shipping_method li label .wcss-label--premium,
.woocommerce-shipping-methods li label .wcss-label--premium {
	display: block;
}

/* Standard + compact stay inline */
#shipping_method li label .wcss-label--standard,
#shipping_method li label .wcss-label--compact,
.woocommerce-shipping-methods li label .wcss-label--standard,
.woocommerce-shipping-methods li label .wcss-label--compact {
	display: inline;
}

/* Prevent WC's default price span from duplicating (WC sometimes adds a price span) */
#shipping_method li label .woocommerce-Price-amount + .wcss-label {
	margin-left: 4px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.wcss-label--premium .wcss-label__rows {
		max-width: 100%;
	}

	.wcss-notice {
		padding: 10px 12px;
	}
}