/* EB Packs — frontend styles stub (P2 owns the builder UI; cart/order display classes below are
   wired by the backend so P2 and the theme can already target them). */

/* Owner fix (prod, 2026-07-05): the mixed builder's flavor rows must lay out RTL (label right,
   stepper left) even though the flavors container is forced LTR (057/Item1). */
.eb-packs-flavor-row {
	direction: rtl;
}

/* 059 (owner north star): NO grid-card CSS at all — container/flavor grid cards are 100%
   Woodmart-native (the former .eb-packs-container-card display:none stack and the custom
   .eb-packs-quick-add button styles are deliberately gone; see class-storefront.php docblock). */

.eb-packs-child-indent {
	margin-right: 1.5em;
	color: #666;
}

tr.eb-packs-container-row td {
	font-weight: 600;
}

tr.eb-packs-child-row td {
	font-size: 0.95em;
}

.eb-packs-locked-qty {
	display: inline-block;
	padding: 0 6px;
}

/* 057/Item5 — struck-through original (pre-pack-discount) sum, prepended right next to the actual
   payable total on both the cart page and checkout order-review (Cart_Handler::
   prepend_struck_original_total(), hooked on woocommerce_cart_totals_order_total_html). */
.eb-packs-original-total {
	text-decoration: line-through;
	color: #999;
	font-weight: 400;
	margin-inline-end: 0.4em;
}

/* ── Builder / size-selector / quick-add (055/D9-D10) — RTL-first (store is fa-IR / dir=rtl) ──
   Self-contained styling: does NOT rely on Perfmatters used-CSS regeneration picking up eb-packs
   markup (a real, observed gap on .ir — see 055 report §D9). Every rule below either hardcodes a
   safe default or reads a Woodmart CSS custom property with a hardcoded fallback
   (var(--wd-primary-color, #7fb100)) so the widgets look right even on a page where Woodmart's own
   generated/critical CSS hasn't captured these classes, while still adopting the theme's actual
   brand color/radius/form metrics when the variables ARE present (normal case). */

.eb-packs-builder,
.eb-packs-size-selector {
	direction: rtl;
	text-align: right;
	margin: 1em 0;
	max-width: 480px;
	font-size: 14px;
	box-sizing: border-box;
}

.eb-packs-builder *,
.eb-packs-size-selector * {
	box-sizing: border-box;
}

.eb-packs-builder__sizes,
.eb-packs-size-selector__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

/* 057/Item1 (UAT round 3, owner-mandated exact rule): `.eb-packs-builder__flavors{direction:ltr;}`
   permanently, per the owner's verified fix to the builder's flavor-list row layout. This
   overrides the RTL direction the flavor rows would otherwise inherit from `.eb-packs-builder`
   (see the 056/Item1 comment on `.eb-packs-flavor-row` below — that fix relied on RTL inheritance
   for the row's OWN name-right/stepper-left placement; `direction:ltr` here reverses which side
   is visually first for each row's flex children, i.e. the flavor name column and the fixed-width
   stepper column now swap physical sides — this is the owner-verified/intended visual result for
   the flavor list specifically, not a bug in the 056 fix; that comment still correctly describes
   why `flex-direction:row-reverse` itself must stay removed).
   Searched for a duplicate owner hot-patch to remove before adding this permanently: checked BOTH
   `wp_get_custom_css()` (Additional CSS, customizer) and a direct DB scan of every wp_options row
   whose value contains the literal string "eb-packs" (excluding the plugin's own `eb_packs_*`
   option keys) on staging during this session's recon — NEITHER contained any eb-packs CSS, so
   there was no live duplicate to remove; if the owner applied a hot-patch it is no longer present. */
.eb-packs-builder__flavors {
	direction: ltr;
}

.eb-packs-size-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--wd-form-brd-color, #e2e2e2);
	border-radius: var(--wd-brd-radius, 4px);
	padding: 7px 14px;
	cursor: pointer;
	font-size: 0.95em;
	background: #fff;
	transition: border-color 0.15s ease;
}

.eb-packs-size-option:has(input:checked) {
	border-color: var(--wd-primary-color, #7fb100);
	box-shadow: 0 0 0 1px var(--wd-primary-color, #7fb100) inset;
}

.eb-packs-size-option input[type="radio"] {
	margin: 0;
	accent-color: var(--wd-primary-color, #7fb100);
}

/* D10 — fixed-width, LEFT-aligned stepper column (RTL: name reads on the right, stepper column
   is a fixed width on the LEFT so every row's stepper lines up regardless of flavor-name length —
   the exact UAT complaint: steppers drifted right/left depending on label length).
   056/Item1 (UAT round 2): `flex-direction: row-reverse` broke RTL — the parent's `direction: rtl`
   (inherited from .eb-packs-builder) already places the FIRST DOM child (the name span) on the
   visual RIGHT and the LAST DOM child (the stepper) on the visual LEFT under normal `row` flow, so
   the explicit reverse doubled up and flipped it the wrong way. Removed; plain `flex-direction: row`
   (the default, left implicit) relies on `direction: rtl` alone to get the same visual result
   correctly. Markup order is unchanged (name span first, stepper div second — see
   class-storefront.php render_builder()), so no PHP/JS change needed. */
.eb-packs-flavor-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
	gap: 12px;
}

.eb-packs-flavor-row__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	/* 057/Item2: the flavor name now has a second line (<br><small> unit-price) beneath it, so this
	   can no longer be a single-line ellipsis truncation — only the NAME's own text should ellipsize
	   if too long (handled by wrapping the name text itself; the <small> line is safe to wrap). */
	white-space: normal;
	line-height: 1.35;
}

/* 057/Item2 — per-flavor unit price line (struck regular unit + current pack unit), same visual
   pattern as the size-selector's own struck/current price (del/ins), sized down to read as a
   secondary line under the flavor name rather than competing with it. */
.eb-packs-flavor-row__unit-price {
	display: block;
	font-size: 0.85em;
	color: #666;
	font-weight: 400;
}

.eb-packs-flavor-row__unit-price del {
	text-decoration: line-through;
	color: #999;
	margin-inline-end: 4px;
}

.eb-packs-flavor-row__unit-price ins {
	text-decoration: none;
	color: var(--wd-primary-color, #7fb100);
	font-weight: 600;
}

.eb-packs-stepper {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	/* Fixed total width regardless of label length (D10) — 28+28+2*6(gap)+44(input) = 112px. */
	width: 112px;
	justify-content: flex-start;
}

.eb-packs-stepper__btn {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	line-height: 1;
	border: 1px solid var(--wd-form-brd-color, #ccc);
	background: #fafafa;
	border-radius: var(--wd-brd-radius, 4px);
	cursor: pointer;
	font-size: 1.1em;
	padding: 0;
	color: #333;
}

.eb-packs-stepper__btn:hover {
	border-color: var(--wd-primary-color, #7fb100);
	color: var(--wd-primary-color, #7fb100);
}

.eb-packs-stepper__input {
	width: 44px;
	flex: 0 0 44px;
	height: 28px;
	text-align: center;
	border: 1px solid var(--wd-form-brd-color, #ccc);
	border-radius: var(--wd-brd-radius, 4px);
	-moz-appearance: textfield;
}

.eb-packs-stepper__input::-webkit-outer-spin-button,
.eb-packs-stepper__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.eb-packs-builder__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 14px 0;
	font-weight: 600;
}

.eb-packs-builder__remaining.is-balanced .eb-packs-builder__remaining-value {
	color: #2a8a3e;
}

.eb-packs-builder__remaining.is-over .eb-packs-builder__remaining-value {
	color: #c0392b;
}

.eb-packs-badge {
	display: inline-block;
	background: #c0392b;
	color: #fff;
	border-radius: 3px;
	padding: 0.1em 0.5em;
	font-size: 0.85em;
	margin-inline-end: 0.4em;
}

.eb-packs-builder__price-regular {
	text-decoration: line-through;
	color: #999;
	font-weight: 400;
	font-size: 0.85em;
	margin-inline-end: 0.4em;
}

/* 056/Item4 — restored "how many packs" qty input, next to the add-to-cart button. */
.eb-packs-builder__qty {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
}

.eb-packs-builder__qty label {
	font-size: 0.9em;
	color: #555;
}

/* 057/Item3 (UAT round 3): compact, ~same visual size as the flavor steppers' own number input
   (.eb-packs-stepper__input is 44px x 28px, see D10 above) — was 64x36 (var(--wd-form-height)),
   which read as a full-size form control next to the compact stepper row. Kept a few px wider
   than the stepper input (48 vs 44) since this one has no +/- buttons beside it to visually anchor
   its width the way the stepper's do, but it is no longer full-width/full-height like the rest of
   Woodmart's normal form fields. */
/* Specificity hardening (mgmt live-verify, round 3): Woodmart's generic form-field styling
   (100%-width inputs in .summary/form.cart) out-specified the bare class rule — the input still
   rendered 436px wide in the real browser. input+class selectors + !important win regardless of
   theme context; max-width guards against flex stretching. */
input.eb-packs-pack-qty,
.summary input.eb-packs-pack-qty,
form.cart input.eb-packs-pack-qty {
	width: 48px !important;
	max-width: 48px !important;
	min-width: 0 !important;
	flex: 0 0 auto !important;
	height: 28px !important;
	text-align: center;
	border: 1px solid var(--wd-form-brd-color, #ccc);
	border-radius: var(--wd-brd-radius, 4px);
}

.eb-packs-builder__errors,
.eb-packs-size-selector .eb-packs-builder__errors {
	display: none;
	color: #c0392b;
	font-size: 0.9em;
	margin: 0.5em 0;
}

.eb-packs-builder__errors.is-visible {
	display: block;
}

.eb-packs-size-selector__price {
	margin: 0.75em 0;
	display: flex;
	gap: 0.75em;
	align-items: baseline;
}

.eb-packs-size-selector__unit-price del,
.eb-packs-size-selector__unit-price ins {
	text-decoration-line: line-through;
	margin-inline-end: 6px;
}

.eb-packs-size-selector__unit-price ins {
	text-decoration: none;
	font-weight: 600;
}

/* 056/Item11 — the "هر عدد X تومان به جای Y" per-unit sub-line under the swapped main price block
   (see eb-packs-frontend.js updateMainPriceBlock()). Rendered INSIDE WooCommerce's own `p.price`
   element (not this plugin's own widget), so it's styled here as a block-level line under the
   del/ins pair rather than inline like the rest of that element's normal content. */
.eb-packs-size-selector__per-unit,
p.price .eb-packs-size-selector__per-unit {
	display: block;
	font-size: 0.6em;
	font-weight: 400;
	color: #666;
	margin-top: 2px;
}

/* Add-to-cart button (D9: full-width primary style, matching Woodmart's own single/loop button) —
   reuses WC/Woodmart's own .button.alt / single_add_to_cart_button classes for color/cascade, but
   the layout rules below (width/display/padding) are hardcoded so the button is correct even if
   Woodmart's generated CSS for this exact class combination never loads. */
.eb-packs-builder .eb-packs-add-to-cart,
.eb-packs-size-selector .eb-packs-add-to-cart {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 12px 20px;
	text-align: center;
	border: none;
	border-radius: var(--wd-brd-radius, 4px);
	background: var(--wd-primary-color, #7fb100);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.eb-packs-builder .eb-packs-add-to-cart:disabled,
.eb-packs-size-selector .eb-packs-add-to-cart:disabled {
	opacity: 0.7;
	cursor: default;
}

/* 056/Item9 — add-to-cart failure toast (replaces the previous window.alert()); used by the
   product-page builder + size-selector (the former grid quick-add is gone — 059). */
.eb-packs-toast {
	direction: rtl;
	text-align: center;
	background: #fdecea;
	color: #c0392b;
	border: 1px solid #f5c6cb;
	border-radius: var(--wd-brd-radius, 4px);
	padding: 6px 10px;
	margin-top: 6px;
	font-size: 0.85em;
}

/* 057/Item7 — success variant: the ALWAYS-shown add-to-cart confirmation (notifyAdded()), styled
   positively (green) since this is now the PRIMARY feedback mechanism on this store (Woodmart's own
   mini-cart-dropdown-open mechanism has no DOM target here — see the JS diagnosis comment above
   notifyAdded() for the full explanation), not an error state. */
.eb-packs-toast--success {
	background: #eaf7ec;
	color: #1e7e34;
	border-color: #c3e6cb;
}

/* ── Add-to-cart loading state (055/D14) ─────────────────────────────────────────────────────── */

.eb-packs-add-to-cart.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

.eb-packs-add-to-cart.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: eb-packs-spin 0.6s linear infinite;
}

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

/* ── Empty mini-cart safety net (055/D15) — RTL Persian fallback links ───────────────────────── */

.eb-packs-mini-cart-fallback {
	direction: rtl;
	text-align: center;
	padding: 1.5em 1em;
}

.eb-packs-mini-cart-fallback__message {
	margin: 0 0 0.75em;
	font-weight: 600;
}

.eb-packs-mini-cart-fallback__links {
	display: flex;
	gap: 0.5em;
	justify-content: center;
	flex-wrap: wrap;
}