/**
 * Sign Pricing Matrix — Public Styles
 *
 * @version 1.3.1
 * @lastModified 08-06-26
 * @package Sign_Pricing_Matrix
 */

/* --- Theme tokens -------------------------------------------------------- */
/*
 * Defaults match the All Signs theme (the orange is the same value the theme
 * uses for .btn-orange). Overriding these custom properties in a child theme
 * is enough to restyle the badge — no plugin edit required.
 */
:root {
	--spm-badge-bg: #f26b1f;
	--spm-badge-fg: #ffffff;
	--spm-badge-radius: 999px;
}

/* --- Fulfillment badge --------------------------------------------------- */
.spm-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0.5em 1.1em;
	margin: 0 0 1em;
	border-radius: var(--spm-badge-radius);
	background: var(--spm-badge-bg);
	color: var(--spm-badge-fg);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
	vertical-align: middle;
}

.spm-badge[hidden] {
	display: none;
}

/*
 * Divi bundles Font Awesome 5.15.1 Free and registers all three faces under
 * the single family name "FontAwesome", separated only by weight. Solid (the
 * face holding the truck and store glyphs) is weight 900 — at weight 400 the
 * declaration resolves to Regular/Brands and the glyph renders as a blank box.
 * The icon is decorative: if the font is unavailable the label still reads
 * correctly on its own.
 */
.spm-badge__icon {
	font-family: FontAwesome, sans-serif;
	font-weight: 900;
	font-style: normal;
	font-size: 1em;
	line-height: 1;
	flex: 0 0 auto;
}

.spm-badge--shippable .spm-badge__icon::before {
	/* fa-truck */
	content: "\f0d1";
}

.spm-badge--pickup .spm-badge__icon::before {
	/* fa-store */
	content: "\f54e";
}

.spm-badge--mixed .spm-badge__icon::before {
	/* fa-info-circle */
	content: "\f05a";
}

/* Listings: smaller, and never pushed onto its own baseline. */
.woocommerce-loop-product__link .spm-badge,
ul.products .spm-badge {
	margin-top: 0.4em;
	font-size: 0.75rem;
	padding: 0.35em 0.85em;
}

/*
 * Mixed-cart fulfillment notice. wc_add_notice() (see
 * SPM_Shipping::render_fulfillment_notice()) only reaches classic-template
 * surfaces, where it renders as WooCommerce core's own .woocommerce-info
 * markup — restyle that via WooCommerce's own class if needed. The Checkout
 * *block* gets this instead: spm-checkout-notice.js renders it as
 * .spm-checkout-fulfillment-banner, styled below.
 */
.spm-checkout-fulfillment-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	background: var(--spm-badge-bg);
	color: var(--spm-badge-fg);
	padding: 0.85em 1.1em;
	margin: 0 0 1.25em;
	border-radius: 6px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
}

.spm-checkout-fulfillment-banner::before {
	/* fa-store */
	content: "\f54e";
	font-family: FontAwesome, sans-serif;
	font-weight: 900;
	font-style: normal;
	flex: 0 0 auto;
	font-size: 1.1em;
	line-height: 1.3;
}

/*
 * Per-line "Fulfillment: Pickup Only" row.
 * WooCommerce derives a display class from the item_data "key" we pass in
 * SPM_Shipping::add_fulfillment_item_data() on both surfaces — no JS needed
 * to find or style it:
 *   - Blocks (Cart/Checkout order summary): wraps both the label and value
 *     in one <span class="wc-block-components-product-details__fulfillment">.
 *   - Classic (cart/checkout review tables): <dt>/<dd> each individually get
 *     class="variation-Fulfillment".
 *
 * `display: inline-block`, not `inline-flex`, is deliberate. The order
 * summary's product-details column is much narrower than the order summary
 * as a whole once the thumbnail and price columns take their share —
 * verified live at ~130-220px across breakpoints, not just on phones — and
 * flexbox lets a flex item shrink below its own text's natural width (the
 * default `min-width: auto` behaviour). That is what made this wrap into a
 * squashed, illegible blob instead of normal multi-line text.
 * `inline-block` still lets the badge grow to two lines where the column is
 * that narrow, without the distortion, and `border-radius` is a modest chip
 * radius rather than a full pill (999px) because a pill shape only looks
 * right on a single line. Verified with real DOM measurements at 1440,
 * 768, 375 and 320px on 08-06-26 — clean 1-2 line wraps, zero overflow.
 */
.wc-block-components-product-details__fulfillment {
	display: inline-block;
	max-width: 100%;
	margin-top: 0.35em;
	padding: 0.3em 0.7em;
	border-radius: 6px;
	background: var(--spm-badge-bg);
	color: var(--spm-badge-fg);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: normal;
	word-break: break-word;
}

.wc-block-components-product-details__fulfillment::before {
	/* fa-store */
	content: "\f54e";
	font-family: FontAwesome, sans-serif;
	font-weight: 900;
	font-style: normal;
	margin-right: 0.4em;
}

dt.variation-Fulfillment,
dd.variation-Fulfillment {
	display: inline;
	background: var(--spm-badge-bg);
	color: var(--spm-badge-fg);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.8;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

dt.variation-Fulfillment {
	padding: 0.3em 0.4em 0.3em 0.6em;
	border-radius: 6px 0 0 6px;
	margin-right: -4px;
}

dt.variation-Fulfillment::before {
	/* fa-store */
	content: "\f54e ";
	font-family: FontAwesome, sans-serif;
	font-weight: 900;
	font-style: normal;
}

dd.variation-Fulfillment {
	padding: 0.3em 0.6em 0.3em 0.4em;
	border-radius: 0 6px 6px 0;
}

dd.variation-Fulfillment p {
	display: inline;
	margin: 0;
}

/*
 * Whole-row tint so shipped and pickup-only lines read as two visually
 * distinct groups in the order summary without restructuring the DOM —
 * :has() is supported by every evergreen browser as of this writing; on a
 * browser without it the row is simply untinted and the badge above still
 * makes the distinction on its own.
 */
.wc-block-components-order-summary-item:has(.wc-block-components-product-details__fulfillment) {
	background: rgba(242, 107, 31, 0.08);
	border-radius: 6px;
	padding: 0.5em;
	margin-left: -0.5em;
	margin-right: -0.5em;
}

tr.cart_item:has(.variation-Fulfillment) {
	background: rgba(242, 107, 31, 0.08);
}

/* --- Options wrapper ----------------------------------------------------- */
.spm-options {
	margin: 1em 0;
}

/* --- Individual field row ------------------------------------------------ */
.spm-field {
	display: flex;
	flex-direction: column;
	margin-bottom: 0.75em;
}

.spm-field label {
	font-weight: 600;
	margin-bottom: 0.25em;
}

.spm-field .spm-select,
.spm-field .spm-custom-input {
	max-width: 320px;
	padding: 0.35em 0.5em;
}

.spm-required-mark {
	color: #c00;
}

/* --- Price display (legacy box — now hidden; price shown in native WC .price element) */
.spm-price {
	display: none !important;
}

.spm-price__label {
	margin-right: 0.25em;
}

.spm-price__prompt {
	font-size: 0.8rem;
	font-weight: 400;
	color: #555;
}

/* --- Custom fields ------------------------------------------------------- */
.spm-custom-fields {
	margin-top: 1em;
}

/* --- Error message ------------------------------------------------------- */
.spm-error {
	color: #c00;
	margin-top: 0.5em;
}

/* --- Disabled add-to-cart ----------------------------------------------- */
.single_add_to_cart_button.disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* --- Cart / checkout order summary — one field per line ------------------ */
/*
 * WooCommerce Blocks renders item meta (from woocommerce_get_item_data) as
 * an inline list joined by " / " via ::before pseudo-elements. These rules
 * override that to show each field on its own line.
 */
.wc-block-components-product-details {
	display: block;
}

.wc-block-components-product-details__item {
	display: block;
	margin-bottom: 3px;
}

.wc-block-components-product-details__item + .wc-block-components-product-details__item::before {
	content: none;
}