/* ==========================================================================
   KORA Furniture Configurator — frontend
   ==========================================================================
   Design tokens reflect the Figma source (Tal's design at KORA-SHOP, node 28:2).
   Background is OWNED by the host column (Elementor) — we render transparent.
   Typography: FUP Galil custom font, fallback Heebo (free, Google Fonts–style).
*/

@font-face {
	font-family: "FUP Galil";
	src: url("../fonts/fup-galil-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

[x-cloak] { display: none !important; }

/* When configurator is active, hide the default WC block add-to-cart so our
   Container 1 fully replaces it. The classic template is already removed in PHP. */
body.efc-configurator-active .wp-block-add-to-cart-form,
body.efc-configurator-active .wc-block-components-product-button,
body.efc-configurator-active form.cart:not(.efc-configurator) {
	display: none !important;
}

/* ============== Defensive button reset ==============
   Elementor Pro ships `reset.css` with `[type="button"], [type="submit"], button`
   rules — same specificity (0,0,1,0) as our `.efc-XXX` button classes but loaded
   LATER, so its `white-space: nowrap` wins and captions render as a single
   overflowing line. Re-assert ONLY the inheritance basics, scoped to our shell
   so we beat that reset (.efc-shell <tag> = 0,0,1,1). Padding/background/border
   are deliberately NOT touched here — pills, swatches, and the CTA each set
   their own and would be flattened otherwise. */
.efc-shell--frontend button,
.efc-shell--summary button {
	font-family: inherit;
	color: inherit;
	line-height: inherit;
	white-space: normal;
	text-align: inherit;
}

/* Elementor's reset.css also paints a magenta (#cc3366) background on
   `[type="button"]:hover/:focus`. Force-clear it across all of our buttons.
   Buttons that *need* their own bg in an active state (pills, CTAs) re-assert
   it with a higher specificity below — see `button.efc-pill.is-active` and
   `.efc-btn--primary`. */
.efc-shell--frontend button:hover,
.efc-shell--frontend button:focus,
.efc-shell--summary button:hover,
.efc-shell--summary button:focus {
	background-color: transparent;
	color: inherit;
}

/* Block-theme product page (e.g. twentytwentyfour) ships single-product as a
   `wp-block-columns` flex container whose direct children include not only the
   image-gallery + summary columns but ALSO `product-details` (tabs/reviews) and
   `related-products`. The flex layout turns those tail blocks into extra columns
   instead of full-width sections below. Force them to wrap to a new line so the
   page stays at exactly 2 columns (gallery + configurator) with the tabs and
   related products full-width underneath. `:has()` keeps the override scoped to
   the product-page columns block and leaves other column blocks alone. */
body.efc-configurator-active .wp-block-columns:has(
	> .wp-block-woocommerce-product-details,
	> .wp-block-woocommerce-related-products
) {
	flex-wrap: wrap !important;
	align-items: flex-start;
}
body.efc-configurator-active .wp-block-columns > .wp-block-woocommerce-product-details,
body.efc-configurator-active .wp-block-columns > .wp-block-woocommerce-related-products {
	flex: 1 1 100% !important;
	max-width: 100% !important;
	width: 100%;
	margin-top: 48px;
}
body.efc-configurator-active .wp-block-columns > .wp-block-woocommerce-related-products {
	margin-top: 64px;
}

.efc-shell--frontend,
.efc-shell--summary,
.efc-modal {
	/* ─── Figma design tokens (KORA-SHOP, node 28:2) ─── */
	--efc-bg-cream:    #fefae2;  /* Makeover container background */
	--efc-bg-image:    #fafafa;  /* Enlarged image area background */
	--efc-ink-900:     #262626;  /* Strong text (title, step number) */
	--efc-ink-700:     #424242;  /* Body text, step titles */
	--efc-ink-500:     #6b7280;  /* Secondary text */
	--efc-ink-400:     #969696;  /* Borders, dividers */
	--efc-ink-300:     #d9d9d9;  /* Placeholder swatches */
	--efc-ink-200:     #e5e7eb;
	--efc-ink-100:     #f1f3f5;
	--efc-green-700:   #465246;  /* Dark green borders + chat icon text */
	--efc-green-500:   #40826d;  /* Primary CTA green */
	--efc-accent-500:  #d2a277;  /* Selected pill / accent */
	--efc-success:     #10b981;
	--efc-danger:      #ef4444;
	--efc-surface:     #ffffff;

	/* Legacy aliases retained so rules from V1 don't visually break: */
	--efc-navy-900: var(--efc-ink-900);
	--efc-navy-800: var(--efc-ink-900);
	--efc-navy-700: var(--efc-ink-700);
	--efc-navy-100: var(--efc-bg-cream);
	--efc-navy-50:  var(--efc-bg-cream);
	--efc-gold-500: var(--efc-accent-500);
	--efc-gold-100: var(--efc-bg-cream);
	--efc-ink-600:  var(--efc-ink-700);
	--efc-ink-50:   var(--efc-bg-cream);

	--efc-r-sm: 6px;
	--efc-r-md: 10px;
	--efc-r-lg: 14px;
	--efc-r-pill: 999px;

	--efc-shadow-sm: 0 1px 2px rgba(38, 38, 38, 0.05);
	--efc-shadow-md: 0 4px 12px rgba(38, 38, 38, 0.07), 0 1px 3px rgba(38, 38, 38, 0.03);
	--efc-shadow-lg: 0 12px 32px rgba(38, 38, 38, 0.10);
	--efc-focus:    0 0 0 3px rgba(210, 162, 119, 0.32);

	--efc-font: "Assistant", "Heebo", "FUP Galil", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	font-family: var(--efc-font);
	color: var(--efc-ink-700);
	direction: rtl;
	margin: 0;
}

.efc-shell--frontend *,
.efc-shell--summary * { box-sizing: border-box; }

/* Prevent horizontal page-scroll on mobile when an absolutely-positioned
   element inside the configurator (the `?` tooltip badge on a pill, the
   shine pseudo-element, etc.) extends slightly past its container near
   the screen edge. `clip` keeps scroll position pristine — `hidden` is the
   older fallback for browsers that don't support `clip` yet. */
.efc-shell--frontend,
.efc-shell--summary {
	overflow-x: hidden;
	overflow-x: clip;
}

/* ============== Configurator (Container 1) ============== */

/* Background is owned by the Elementor column wrapping the shortcode.
   We render transparent so the host's cream / pattern / image shows through. */
.efc-configurator {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
}

.efc-configurator__header {
	padding: 0 0 16px;
	background: transparent;
	border-bottom: none;
}

/* Sticky bottom bar — progress + total price + Add to Cart follow the
   customer as they scroll through the steps. The bar pins to the viewport
   bottom while the form is in view; it scrolls away naturally once the form
   ends, exposing the AI Visualize button + any post-form content. The white→
   transparent gradient reads cleanly over whatever scrolls beneath it. */
.efc-configurator__sticky-bar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	margin: 24px 0 0;
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #ffffff;
	border: 1px solid var(--efc-ink-200, #e5e7eb);
	border-radius: 12px;
	box-shadow: 0 1px 0 rgba(15, 36, 56, .03);
}
.efc-configurator__sticky-bar .efc-progress { margin: 0; }
.efc-configurator__sticky-bar .efc-price-bar { margin: 0; }
.efc-configurator__sticky-bar .efc-cta-row { margin: 0; }
/* Visualize button slides under the Add-to-Cart row once canAddToCart flips,
   never sits there empty waiting on selections. Full width to read as a
   complementary action below the primary one. */
.efc-cta-visualize {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.efc-cta-visualize__ai-icon {
	flex: 0 0 auto;
	filter: drop-shadow(0 1px 2px rgba(196, 116, 165, 0.25));
}
.efc-cta-visualize:hover .efc-cta-visualize__ai-icon {
	transform: scale(1.08);
	transition: transform .15s ease;
}

/* "Coming soon" locked state — muted, non-interactive, "בקרוב" label. The
   sparkle icon desaturates so it reads as inactive. */
.efc-cta-visualize--soon,
.efc-cta-visualize--soon:hover {
	opacity: 0.65;
	cursor: not-allowed;
	filter: grayscale(0.4);
}
.efc-cta-visualize--soon .efc-cta-visualize__ai-icon { transform: none; filter: grayscale(1) opacity(0.7); }
/* Admin-only hint shown under the (still-active-for-admin) button when the
   coming-soon mode is on. */
.efc-cta-visualize__admin-note {
	margin: 8px 0 0;
	padding: 8px 12px;
	background: #fff8e1;
	border: 1px dashed #d2a277;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.5;
	color: #7a5b2e;
	text-align: center;
}

.efc-configurator__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--efc-ink-900);
	letter-spacing: -0.01em;
}

/* Top progress bar — sits under the form title, fills as the customer picks
   values across the visible steps. Track is muted ink, fill uses the accent. */
.efc-progress {
	margin: 14px 0 0;
	height: 8px;
	background: var(--efc-ink-200);
	border-radius: var(--efc-r-pill);
	overflow: hidden;
}
.efc-progress__bar {
	height: 100%;
	background: var(--efc-accent-500);
	border-radius: inherit;
	transition: width 0.25s ease;
}

/* Locked steps — dimmed and click-blocked while any earlier required step
   still has no selection. Forces the customer through the flow in order
   without hard-resetting their existing selections. */
.efc-step--locked {
	opacity: 0.4;
	pointer-events: none;
	user-select: none;
	filter: grayscale(0.35);
	transition: opacity 0.2s ease, filter 0.2s ease;
}

/* ============== Step (Figma: title block on the right, big index on the left) ============== */

.efc-step {
	padding: 32px 0 24px;
	border-bottom: 1px solid var(--efc-ink-400);
}

.efc-step:last-child { border-bottom: none; }

.efc-step__header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

/* Big number, no circle, sits opposite the title in the RTL flow.
   In RTL flex-row, the LAST child visually appears on the LEFT —
   which is where Figma places the digit. */
.efc-step__index {
	order: 2;
	font-family: var(--efc-font);
	font-size: 36px;
	font-weight: 600;
	line-height: 1;
	color: var(--efc-ink-700);
	background: none;
	width: auto;
	height: auto;
	border-radius: 0;
	flex-shrink: 0;
	padding-top: 4px;
}

.efc-step__titles {
	order: 1;
	flex: 1;
	min-width: 0;
	text-align: start;
}

.efc-step__label {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	color: var(--efc-ink-700);
	line-height: 1.2;
}

.efc-step__req {
	display: inline-block;
	color: var(--efc-accent-500);
	margin-inline-start: 4px;
}

.efc-step__desc {
	margin: 8px 0 0;
	font-size: 16px;
	font-weight: 500;
	color: var(--efc-ink-700);
}

/* Selection-summary badge in the step header is intentionally hidden — the
   active card's accent border carries that signal, and the badge was pushing
   the step index out of place. Keep the markup (renderer/JS still reference
   it) but render nothing. */
.efc-step__chosen { display: none; }

/* ============== image-buttons (Figma: square 147×147 swatches, 4 per row desktop) ============== */

.efc-img-grid {
	display: grid;
	/* minmax(0, 1fr) — without it, long Hebrew captions like
	   "ספה פינתית עם שזלונג שמאל" force the column past 1fr to fit
	   their min-content, which spills the last card out of the host
	   container. The plugin must render cleanly in any column width. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

/* button.efc-img-btn (0,0,1,1) — beats Elementor reset's `[type="button"]`
   (0,0,1,0) so our display:flex + padding:0 actually apply. */
button.efc-img-btn {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 0;
	min-width: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

/* button.efc-img-btn img (0,1,2) — beats Elementor frontend.css's `.elementor
   img { border: 0 }` (0,1,1) which otherwise nukes our reserved transparent
   border and turns the .is-active accent border invisible. */
button.efc-img-btn img,
button.efc-img-btn .efc-img-btn__placeholder {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: var(--efc-r-sm);
	border: 2px solid var(--efc-ink-200, #e5e7eb);
	background: #ffffff;
	transition: border-color 0.15s ease;
}
/* Inner padding so the PNG breathes inside the white card. Image renders
   as-is — no color manipulation. If the admin wants a black-silhouette
   style icon, they upload a transparent-background PNG with black vector
   lines; the card's white background does the rest. */
button.efc-img-btn img {
	padding: 12px;
}

.efc-img-btn__placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 700;
	color: var(--efc-ink-500);
}

.efc-img-btn__caption {
	display: block;
	width: 100%;
	font-size: 14px;
	font-weight: 500;
	color: var(--efc-ink-700);
	text-align: center;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

/* Per-value price modifier shown under the caption — visible even when 0 so
   the customer always sees the cost delta. Active card bumps weight + ink. */
.efc-img-btn__price {
	display: block;
	width: 100%;
	margin-top: -4px;
	font-size: 12px;
	font-weight: 500;
	color: var(--efc-ink-500);
	text-align: center;
}
button.efc-img-btn.is-active .efc-img-btn__price { color: var(--efc-ink-900); font-weight: 600; }

button.efc-img-btn:hover img,
button.efc-img-btn:hover .efc-img-btn__placeholder { border-color: var(--efc-accent-500); }
button.efc-img-btn:focus-visible { outline: 0; box-shadow: var(--efc-focus); border-radius: var(--efc-r-md); }
button.efc-img-btn.is-active img,
button.efc-img-btn.is-active .efc-img-btn__placeholder { border-color: var(--efc-accent-500); border-width: 2px; }
button.efc-img-btn.is-active .efc-img-btn__caption { color: var(--efc-ink-900); font-weight: 700; }

/* ============== fabric-swatch (Figma: 158×91 rect with label below + magnifier icon) ============== */

.efc-swatch-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px 20px;
}

button.efc-swatch {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	min-width: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

/* button.efc-swatch img (0,1,2) — same defense against `.elementor img` as
   button.efc-img-btn above. */
button.efc-swatch img,
button.efc-swatch .efc-swatch__placeholder {
	width: 100%;
	aspect-ratio: 158 / 91;
	object-fit: cover;
	border-radius: var(--efc-r-md);
	border: 2px solid transparent;
	background: var(--efc-ink-300);
	transition: border-color 0.15s ease;
}

.efc-swatch__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: var(--efc-ink-500);
}

.efc-swatch__label {
	display: block;
	width: 100%;
	font-size: 14px;
	font-weight: 400;
	color: var(--efc-green-700);
	text-align: center;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

.efc-swatch__price {
	display: block;
	width: 100%;
	margin-top: -2px;
	font-size: 12px;
	font-weight: 500;
	color: var(--efc-ink-500);
	text-align: center;
}
button.efc-swatch.is-active .efc-swatch__price { color: var(--efc-ink-900); font-weight: 600; }

button.efc-swatch:hover img,
button.efc-swatch:hover .efc-swatch__placeholder { border-color: var(--efc-accent-500); }
button.efc-swatch.is-active img,
button.efc-swatch.is-active .efc-swatch__placeholder { border-color: var(--efc-accent-500); border-width: 2px; }
button.efc-swatch.is-active .efc-swatch__label { color: var(--efc-ink-900); font-weight: 700; }

/* ============== color-swatch ============== */

.efc-color-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.efc-color {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--efc-ink-200);
	cursor: pointer;
	position: relative;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.efc-color:hover { transform: scale(1.08); }
.efc-color:focus-visible { outline: 0; box-shadow: var(--efc-focus); }

.efc-color__check {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.efc-color.is-active { border-color: var(--efc-navy-900); transform: scale(1.05); box-shadow: var(--efc-shadow-md); }
.efc-color.is-active .efc-color__check { opacity: 1; }

/* ============== pills ============== */

/* Pills match the Figma "BOLZANO" fabric-type row: white capsule with a
   1.5px accent border (and dark text), turning into a solid accent fill when
   selected. They wrap onto multiple rows because the row often has 5 items. */
.efc-pills { display: flex; gap: 10px 12px; flex-wrap: wrap; }

/* button.efc-pill (0,1,1) — beats Elementor's `[type="button"]` reset (0,1,0)
   that otherwise repaints the border in #cc3366 and ink at #424242. */
button.efc-pill {
	padding: 10px 22px;
	background: var(--efc-surface);
	border: 1.5px solid var(--efc-accent-500);
	border-radius: var(--efc-r-pill);
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--efc-ink-900);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

button.efc-pill:hover { background: rgba(210, 162, 119, 0.12); }
button.efc-pill:focus-visible { outline: 0; box-shadow: var(--efc-focus); }

/* button.efc-pill (0,2,1) — beats the shell-scoped hover reset above so the
   active pill keeps its solid accent fill even while being hovered. */
button.efc-pill.is-active,
button.efc-pill.is-active:hover,
button.efc-pill.is-active:focus {
	background: var(--efc-accent-500);
	border-color: var(--efc-accent-500);
	color: var(--efc-ink-900);
	font-weight: 600;
}

/* Pill label + per-value modifier render inline so the price reads as a quiet
   suffix ("חלוקה למיטה יהודית · +750 ₪"). The price stays a touch dimmer than
   the label on inactive pills. */
.efc-pill__label { vertical-align: middle; }
.efc-pill__price {
	display: inline-block;
	margin-inline-start: 6px;
	padding-inline-start: 8px;
	border-inline-start: 1px solid currentColor;
	opacity: 0.65;
	font-size: 12px;
	font-weight: 500;
	vertical-align: middle;
}
button.efc-pill.is-active .efc-pill__price { opacity: 1; }

/* ============== cards ============== */

.efc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.efc-card {
	display: flex;
	flex-direction: column;
	background: var(--efc-surface);
	border: 2px solid var(--efc-ink-200);
	border-radius: var(--efc-r-md);
	overflow: hidden;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: inherit;
}

.efc-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.efc-card__body { padding: 12px 14px; }
.efc-card__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--efc-ink-900); }
.efc-card__desc { margin: 4px 0 0; font-size: 12px; color: var(--efc-ink-500); }
.efc-card__price { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--efc-navy-800); }

.efc-card:hover { border-color: var(--efc-navy-700); box-shadow: var(--efc-shadow-md); }
.efc-card.is-active { border-color: var(--efc-navy-800); }

/* ============== radio ============== */

.efc-radios { display: flex; flex-direction: column; gap: 8px; }

.efc-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--efc-ink-50);
	border-radius: var(--efc-r-md);
	cursor: pointer;
	font-size: 14px;
}

.efc-radio input[type="radio"] { accent-color: var(--efc-navy-800); }

/* ============== toggle ============== */

.efc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.efc-toggle input[type="checkbox"] { display: none; }

.efc-toggle__track {
	width: 44px;
	height: 24px;
	background: var(--efc-ink-300);
	border-radius: var(--efc-r-pill);
	position: relative;
	transition: background 0.2s ease;
}

.efc-toggle__track::after {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	top: 3px;
	right: 3px;
	transition: transform 0.2s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.efc-toggle input:checked + .efc-toggle__track { background: var(--efc-navy-800); }
.efc-toggle input:checked + .efc-toggle__track::after { transform: translateX(-20px); }

.efc-toggle__label { font-size: 14px; }

/* ============== quantity ============== */

.efc-qty {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.efc-qty button {
	width: 36px;
	height: 36px;
	background: var(--efc-surface);
	border: 1.5px solid var(--efc-ink-300);
	border-radius: var(--efc-r-md);
	font-size: 18px;
	cursor: pointer;
}

.efc-qty button:hover { border-color: var(--efc-navy-700); }

.efc-qty input {
	width: 64px;
	height: 36px;
	text-align: center;
	border: 1.5px solid var(--efc-ink-300);
	border-radius: var(--efc-r-md);
	font-size: 15px;
	font-weight: 600;
}

/* ============== slider ============== */

.efc-slider { display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.efc-slider input[type="range"] { width: 100%; accent-color: var(--efc-navy-800); }
.efc-slider__label { font-size: 13px; color: var(--efc-ink-700); text-align: center; }

/* ============== Footer / Price / CTAs ============== */

/* Footer holds the validation list only. Background is transparent so the
   cream/yellow strip doesn't linger after all selections are filled — the
   warning panel inside (`.efc-validation`) carries its own yellow when
   visible, and the strip vanishes the moment the customer completes the
   form. */
.efc-configurator__footer {
	padding: 0;
	background: transparent;
	border-top: 0;
}

.efc-price-bar {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
}

.efc-price-bar__amount {
	font-size: 28px;
	font-weight: 700;
	color: var(--efc-navy-900);
	letter-spacing: -0.02em;
}

.efc-price-bar__lead {
	font-size: 13px;
	color: var(--efc-ink-500);
}

.efc-cta-row {
	display: flex;
	gap: 10px;
	flex-direction: column;
}

@media (min-width: 600px) {
	.efc-cta-row { flex-direction: row; }
	.efc-cta-row .efc-btn { flex: 1; }
}

/* button.efc-btn (0,1,1) — beats Elementor reset.css's `[type="button"]`
   (0,1,0) which otherwise paints our CTA + summary buttons with a magenta
   border. The whole `.efc-btn` family needs the bump so primary/secondary/lg
   modifiers and the disabled state also win the cascade. */
button.efc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--efc-r-md);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	font-family: var(--efc-font);
	transition: all 0.15s ease;
}

button.efc-btn--lg { padding: 14px 24px; font-size: 15px; }

button.efc-btn--primary { background: var(--efc-navy-800); color: #fff; border-color: var(--efc-navy-800); }
button.efc-btn--primary:hover:not([disabled]) { background: var(--efc-navy-900); border-color: var(--efc-navy-900); box-shadow: var(--efc-shadow-md); }
button.efc-btn--secondary { background: var(--efc-surface); color: var(--efc-navy-800); border-color: var(--efc-ink-300); }
button.efc-btn--secondary:hover:not([disabled]) { border-color: var(--efc-navy-800); }
button.efc-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.efc-validation {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: #ffffff;
	border-radius: var(--efc-r-md);
	color: var(--efc-ink-900);
	font-size: 13px;
}

/* Pill tooltip (?) — shown when a value has a `description` meta. Hover
   reveals a small balloon explaining what that option means. Used by the
   cushion firmness step (רך / בינוני / קשה / נוצות). */
/* The `?` icon is INLINE (not corner-absolute) so the tooltip can anchor to
   the full-width `.efc-pills` row instead of the tiny 18px icon. This is the
   key: a tooltip anchored to a small icon near the screen edge overflows;
   anchored to the full row it physically cannot escape sideways — it just
   wraps text to more lines. */
.efc-pills { position: relative; }
.efc-pill { position: static; }
.efc-pill__info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-inline-start: 6px;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: var(--efc-navy-800, #1a3550);
	border-radius: 50%;
	cursor: help;
}
/* Tooltip bubble — anchored to the full `.efc-pills` row (inset-inline:0),
   dropping just below it. Because it spans the row width exactly, it can
   never bleed past the left/right edge of the configurator; long text wraps
   downward into as many lines as needed. Flat dark box, no shadow. All
   pills' tooltips stack at the same spot — only the hovered/tapped one is
   visible via opacity. */
.efc-pill__info::after {
	content: attr(data-tooltip);
	position: absolute;
	top: 100%;
	inset-inline: 0;
	margin-top: 8px;
	padding: 10px 14px;
	background: var(--efc-navy-800, #1a3550);
	color: #fff;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.55;
	border-radius: 8px;
	white-space: normal;
	text-align: start;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
	z-index: 100;
}
.efc-pill__info:hover::after,
.efc-pill__info:focus::after { opacity: 1; }

/* Gift step textarea — opens when a selected pill carries `requires_note`. */
.efc-pills__note {
	margin: 14px 0 0;
	padding: 14px;
	background: var(--efc-bg-cream, #fefae2);
	border: 1.5px solid var(--efc-accent-500, #d2a277);
	border-radius: 12px;
}
.efc-pills__note-label {
	display: block;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--efc-ink-900, #0f1419);
}
.efc-pills__note-input {
	width: 100%;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14px;
	color: var(--efc-ink-900, #0f1419);
	background: #fff;
	border: 1px solid var(--efc-ink-300, #d1d5db);
	border-radius: 8px;
	resize: vertical;
	min-height: 70px;
}
.efc-pills__note-input:focus {
	outline: 0;
	border-color: var(--efc-navy-800, #1a3550);
	box-shadow: 0 0 0 3px rgba(26, 53, 80, .12);
}
.efc-pills__note-hint {
	margin: 6px 0 0;
	font-size: 11px;
	color: var(--efc-ink-500, #6b7280);
	text-align: end;
	font-variant-numeric: tabular-nums;
}

/* Gift step — shine animation on the title when the step first appears.
   The text gets a moving white-gradient highlight that sweeps across once. */
.efc-step--gift {
	background: linear-gradient(135deg, rgba(254, 250, 226, .35), rgba(210, 162, 119, .12) 60%, transparent);
	border-radius: 14px;
	padding: 4px;
}
/* Shine sweep on the gift step title. Old version used background-clip:text
   with color:transparent, which left the text stuck in a weird gradient
   color when the animation finished. New version keeps the text itself
   solid and overlays a pseudo-element that sweeps once from start to end
   and then parks itself off-screen via animation-fill-mode:forwards. End
   state is clean — solid text, invisible overlay, no stuck colors. */
.efc-step__label--shine {
	position: relative;
	display: inline-block;
	color: var(--efc-ink-900, #0f1419);
	overflow: hidden;
}
.efc-step__label--shine::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: -120%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		100deg,
		transparent 0%,
		transparent 35%,
		rgba(254, 250, 226, 0.55) 45%,
		rgba(255, 255, 255, 0.85) 50%,
		rgba(210, 162, 119, 0.65) 55%,
		transparent 65%,
		transparent 100%
	);
	animation: efc-shine-sweep 1600ms ease-in-out 1 forwards;
	pointer-events: none;
}
@keyframes efc-shine-sweep {
	0%   { inset-inline-start: -120%; }
	100% { inset-inline-start: 120%; }
}

/* Fabric/color swatch zoom — small magnifier badge in the corner of each
   `.efc-swatch`. Click opens a fullscreen lightbox so the customer can
   inspect the texture at full resolution. Stops propagation so the click
   doesn't double as "select this fabric". */
.efc-swatch-wrap { position: relative; display: contents; }
.efc-swatch-grid > .efc-swatch-wrap { display: block; }
button.efc-swatch__zoom,
.efc-swatch__zoom {
	position: absolute;
	bottom: 8px;
	inset-inline-start: 8px;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	color: #0f1419;
	border: 1px solid var(--efc-ink-200, #e5e7eb);
	border-radius: 50%;
	cursor: zoom-in;
	box-shadow: 0 2px 6px rgba(15, 36, 56, .18);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	z-index: 2;
	padding: 0;
}
.efc-swatch__zoom:hover {
	transform: scale(1.12);
	background: var(--efc-bg-cream, #fefae2);
	box-shadow: 0 4px 10px rgba(15, 36, 56, .25);
}
.efc-swatch__zoom:focus-visible {
	outline: 2px solid var(--efc-navy-800, #1a3550);
	outline-offset: 2px;
}

/* Lightbox overlay used by `openZoom()` — fixed full-viewport, dimmed
   background, centered image. Click outside or on the close × to dismiss;
   Escape key too (wired in JS). */
.efc-zoom-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(15, 36, 56, 0.88);
	backdrop-filter: blur(4px);
	cursor: zoom-out;
	animation: efc-zoom-fade-in .18s ease-out;
}
.efc-zoom-overlay__img {
	max-width: min(92vw, 1100px);
	max-height: 82vh;
	width: auto;
	height: auto;
	display: block;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
	cursor: default;
}
.efc-zoom-overlay__caption {
	margin: 14px 0 0;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
}
button.efc-zoom-overlay__close,
.efc-zoom-overlay__close {
	position: absolute;
	top: 18px;
	inset-inline-end: 22px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 400;
	color: #0f1419;
	background: rgba(255, 255, 255, 0.94);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
	transition: background .15s ease;
}
.efc-zoom-overlay__close:hover { background: #fff; }
@keyframes efc-zoom-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Measuring-guide caption (Elementor template + popup link) — inline BESIDE
   the section title ("מידות" etc.), styled as a light helper so it doesn't
   compete with the heading. Inner block tags from the Elementor template are
   flattened to inline so the whole thing sits on the title line; on narrow
   screens it wraps gracefully underneath. */
.efc-step__label .efc-step__dims-caption {
	display: inline-block;
	margin-inline-start: 12px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--efc-ink-600, #4b5563);
	vertical-align: middle;
}
.efc-step__dims-caption p,
.efc-step__dims-caption div,
.efc-step__dims-caption span { display: inline; margin: 0; }
.efc-step__dims-caption a { text-decoration: underline; cursor: pointer; }
@media (max-width: 560px) {
	.efc-step__label .efc-step__dims-caption {
		display: block;
		margin: 4px 0 0;
	}
}

/* Price-calculating spinner — replaces the amount in the sticky bar (and the
   summary card) from the moment a selection changes until /render returns the
   authoritative price. Prevents the confusing flash of a stale amount. */
.efc-price-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	border: 2.5px solid rgba(26, 53, 80, 0.18);
	border-top-color: var(--efc-navy-800, #1a3550);
	border-radius: 50%;
	animation: efc-price-spin 0.7s linear infinite;
}
.efc-price-spinner--sm { width: 15px; height: 15px; border-width: 2px; }
@keyframes efc-price-spin {
	to { transform: rotate(360deg); }
}

/* ===== Manual-order track fields (admin phone orders) ===== */

/* Image uploader — up to 3 thumbnails + an "add" tile. */
.efc-imgup__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.efc-imgup__thumb {
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--efc-ink-200, #e5e7eb);
	background: #f6f7f7;
}
.efc-imgup__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.efc-imgup__remove {
	position: absolute;
	top: 4px;
	inset-inline-end: 4px;
	width: 22px;
	height: 22px;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 36, 56, .82);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.efc-imgup__add {
	width: 96px;
	height: 96px;
	border: 1.5px dashed var(--efc-accent-500, #d2a277);
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--efc-navy-800, #1a3550);
	background: var(--efc-bg-cream, #fefae2);
	cursor: pointer;
	padding: 6px;
}
.efc-imgup__add.is-busy { opacity: .6; cursor: progress; }
.efc-imgup__add input[type="file"] { display: none; }
.efc-imgup__hint { margin: 8px 0 0; font-size: 12px; color: var(--efc-ink-500, #6b7280); font-variant-numeric: tabular-nums; }

/* Custom-price adder — view mode (₪ amount + ✏️) / edit mode (input + ✓). */
.efc-priceadd__view,
.efc-priceadd__edit-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.efc-priceadd__amount {
	font-size: 18px;
	font-weight: 700;
	color: var(--efc-navy-900, #0f2438);
	font-variant-numeric: tabular-nums;
}
.efc-priceadd__edit,
.efc-priceadd__confirm {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 1px solid var(--efc-ink-200, #e5e7eb);
	background: #fff;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.efc-priceadd__confirm {
	background: var(--efc-green-500, #40826d);
	border-color: var(--efc-green-500, #40826d);
	color: #fff;
	font-weight: 700;
}
.efc-priceadd__currency { font-size: 16px; font-weight: 700; color: var(--efc-navy-800, #1a3550); }
.efc-priceadd__input {
	width: 120px;
	padding: 8px 10px;
	font-size: 15px;
	font-family: inherit;
	text-align: end;
	border: 1px solid var(--efc-navy-800, #1a3550);
	border-radius: 8px;
	font-variant-numeric: tabular-nums;
}
.efc-priceadd__input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(26, 53, 80, .12); }
.efc-priceadd__label-note { margin: 8px 0 0; font-size: 12px; color: var(--efc-ink-500, #6b7280); }

/* Order notes — free textarea. */
.efc-ordernotes__input {
	width: 100%;
	padding: 12px 14px;
	font-family: inherit;
	font-size: 14px;
	color: var(--efc-ink-900, #0f1419);
	background: #fff;
	border: 1px solid var(--efc-ink-300, #d1d5db);
	border-radius: 10px;
	resize: vertical;
	min-height: 72px;
}
.efc-ordernotes__input:focus { outline: 0; border-color: var(--efc-navy-800, #1a3550); box-shadow: 0 0 0 3px rgba(26, 53, 80, .12); }
.efc-ordernotes__hint { margin: 6px 0 0; font-size: 11px; color: var(--efc-ink-500, #6b7280); text-align: end; font-variant-numeric: tabular-nums; }

/* Confetti — spawned by _fireConfetti() when the gift step first mounts.
   Each .efc-confetti__piece is a 10×6 colored rectangle that falls + rotates
   from above the viewport down past the bottom. Container is fixed so it
   sits above any sticky bar. */
.efc-confetti {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 9999;
}
.efc-confetti__piece {
	position: absolute;
	top: -20px;
	width: 10px;
	height: 6px;
	border-radius: 2px;
	opacity: .9;
	animation: efc-confetti-fall ease-in forwards;
}
@keyframes efc-confetti-fall {
	0%   { transform: translateY(-20px) rotate(0deg);    opacity: 0; }
	10%  { opacity: .95; }
	100% { transform: translateY(110vh) rotate(540deg);  opacity: .85; }
}
@media (prefers-reduced-motion: reduce) {
	.efc-step__label--shine::before { animation: none; display: none; }
	.efc-confetti { display: none; }
}
.efc-validation strong { color: var(--efc-ink-900); }

/* ============== Summary (Container 2) ============== */

.efc-summary-card {
	background: var(--efc-surface);
	border: 1px solid var(--efc-ink-200);
	border-radius: var(--efc-r-lg);
	box-shadow: var(--efc-shadow-md);
	overflow: hidden;
}

.efc-summary-card__header {
	padding: 18px 24px;
	background: #ffffff;
	border-bottom: 1px solid var(--efc-ink-100);
}

.efc-summary-card__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--efc-navy-900);
}

.efc-summary-card__body { padding: 20px 24px; }

.efc-summary-empty {
	margin: 0;
	color: var(--efc-ink-500);
	font-size: 14px;
	text-align: center;
	padding: 16px;
}

.efc-summary-list { margin: 0; }

.efc-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px dashed var(--efc-ink-200);
	font-size: 14px;
}

.efc-summary-row:last-child { border-bottom: none; }

.efc-summary-row dt { color: var(--efc-ink-600); font-weight: 500; margin: 0; }
.efc-summary-row dd { margin: 0; color: var(--efc-ink-900); font-weight: 600; text-align: left; }

.efc-summary-row--price {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 2px solid var(--efc-navy-800);
	border-bottom: none;
}
.efc-summary-row--price dt { font-size: 15px; font-weight: 700; color: var(--efc-navy-900); }
.efc-summary-row--price dd { font-size: 18px; font-weight: 700; color: var(--efc-navy-900); }

.efc-summary-card__footer {
	padding: 14px 20px;
	background: #ffffff;
	border-top: 1px solid var(--efc-ink-100);
	display: flex;
	gap: 8px;
	flex-direction: column;
}

/* Copy-order + WhatsApp buttons: icon + label, centered with a small gap. */
.efc-btn--copy,
.efc-btn--whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.efc-btn__copy-icon,
.efc-btn__wa-icon { flex: 0 0 auto; }
/* WhatsApp icon: black stroke, no fill — inherits the button's text color. */
.efc-btn--whatsapp .efc-btn__wa-icon { color: #0f1419; }

@media (min-width: 600px) {
	.efc-summary-card__footer { flex-direction: row; }
	.efc-summary-card__footer .efc-btn { flex: 1; }
}

/* ============== Modal ============== */

.efc-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	direction: rtl;
}

.efc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 36, 56, 0.55);
	backdrop-filter: blur(2px);
}

.efc-modal__panel {
	position: relative;
	background: var(--efc-surface, #fff);
	border-radius: 14px;
	max-width: 600px;
	width: calc(100% - 32px);
	max-height: 86vh;
	overflow-y: auto;
	padding: 28px;
	box-shadow: 0 24px 64px rgba(15, 36, 56, 0.3);
	font-family: var(--efc-font, sans-serif);
}

.efc-modal__close,
button.efc-modal__close {
	position: absolute;
	top: 12px;
	left: 16px;
	background: transparent;
	border: 0;
	outline: 0;
	padding: 4px 8px;
	font-size: 28px;
	color: var(--efc-ink-400, #969696);
	cursor: pointer;
	line-height: 1;
	transition: color .15s ease;
}
.efc-modal__close:hover { color: var(--efc-navy-800, #1a3550); }
.efc-modal__close:focus-visible { outline: 2px solid var(--efc-navy-800, #1a3550); outline-offset: 2px; border-radius: 4px; }

.efc-modal__intro { color: #6b7280; font-size: 14px; }

.efc-modal__preview {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 14px;
	font-family: ui-monospace, monospace;
	font-size: 12px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 320px;
	overflow-y: auto;
}

.efc-modal__footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}

/* AI visualization modal — additions for the 4-state flow */
.efc-modal__title { margin: 0 0 12px; font-size: 22px; font-weight: 700; color: var(--efc-ink-900); }
.efc-modal__step { min-height: 220px; display: flex; flex-direction: column; }
.efc-modal__error { margin: 10px 0 0; color: var(--efc-danger); font-size: 13px; font-weight: 500; }

/* Email gate (step 0) — 2-image quota note */
.efc-modal__quota-note {
	margin: 8px 0 0;
	padding: 8px 12px;
	font-size: 12px;
	color: var(--efc-ink-700, #374151);
	background: var(--efc-bg-cream, #fefae2);
	border-inline-start: 3px solid var(--efc-accent-500, #d2a277);
	border-radius: 6px;
}

/* Email gate (step 0) */
.efc-modal__field { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; }
.efc-modal__field-label { font-size: 13px; font-weight: 600; color: var(--efc-ink-700, #374151); }
.efc-modal__input {
	width: 100%;
	padding: 11px 14px;
	font-size: 15px;
	font-family: inherit;
	border: 1px solid var(--efc-ink-300, #d1d5db);
	border-radius: 8px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.efc-modal__input:focus {
	outline: 0;
	border-color: var(--efc-navy-800, #1a3550);
	box-shadow: 0 0 0 3px rgba(26, 53, 80, .12);
}
.efc-modal__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--efc-ink-700, #374151);
	cursor: pointer;
}
.efc-modal__consent input { margin: 2px 0 0; flex: 0 0 auto; cursor: pointer; }
.efc-modal__consent a { color: var(--efc-navy-800, #1a3550); text-decoration: underline; }

/* Result step — social share trio in KORA brand palette only (cream +
   navy + accent). Same identity across all 3 platforms; the platform
   identity comes from the platform-shaped glyph, not from clashing
   external brand colors. */
.efc-modal__share-prompt {
	margin: 16px 0 10px;
	text-align: center;
	font-size: 13px;
	color: var(--efc-ink-700, #374151);
	line-height: 1.5;
}
.efc-modal__social-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0 0 4px;
}
button.efc-modal__social-btn,
.efc-modal__social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 10px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	color: var(--efc-navy-800, #1a3550);
	background: var(--efc-bg-cream, #fefae2);
	border: 1.5px solid var(--efc-accent-500, #d2a277);
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.efc-modal__social-btn:hover {
	background: var(--efc-navy-800, #1a3550);
	color: #fff;
	border-color: var(--efc-navy-800, #1a3550);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(15, 36, 56, .14);
}
.efc-modal__social-btn:hover .efc-modal__social-btn-icon { background: rgba(255,255,255,.18); }
.efc-modal__social-btn:hover .efc-modal__social-btn-label { color: #fff; }
.efc-modal__social-btn:active { transform: translateY(0); }
.efc-modal__social-btn:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: none; }
.efc-modal__social-btn-icon {
	display: inline-flex;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(26, 53, 80, .08);
	color: var(--efc-navy-800, #1a3550);
	transition: background .15s ease, color .15s ease;
}
.efc-modal__social-btn-label {
	color: var(--efc-navy-800, #1a3550);
	font-weight: 600;
	transition: color .15s ease;
}

.efc-modal__share-toast {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: var(--efc-bg-cream, #fefae2);
	border: 1px solid var(--efc-accent-500, #d2a277);
	border-radius: 8px;
	font-size: 13px;
	color: var(--efc-ink-900, #0f1419);
	text-align: center;
}

/* Single share button + dropdown popover (v0.4.4+) — replaces the 3-button
   row. Cleaner: one CTA, popover with the platforms only (no OS sheet
   noise) when the customer clicks. */
.efc-modal__share-wrap { position: relative; margin: 4px 0 0; }
button.efc-modal__share-main,
.efc-modal__share-main {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	color: #fff;
	background: var(--efc-navy-800, #1a3550);
	border: 1.5px solid var(--efc-navy-800, #1a3550);
	border-radius: 12px;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.efc-modal__share-main:hover {
	background: var(--efc-navy-900, #0f2438);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(15, 36, 56, .18);
}
.efc-modal__share-main:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: none; }
.efc-modal__share-main-icon { display: inline-flex; }
.efc-modal__share-main-caret { font-size: 14px; transition: transform .2s ease; }
.efc-modal__share-main-caret.is-open { transform: rotate(180deg); }

.efc-modal__share-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--efc-ink-200, #e5e7eb);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(15, 36, 56, .18);
}
button.efc-modal__share-option,
.efc-modal__share-option {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	color: var(--efc-ink-900, #0f1419);
	background: transparent;
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	text-align: start;
	transition: background .12s ease;
}
.efc-modal__share-option:hover { background: var(--efc-bg-cream, #fefae2); }
.efc-modal__share-option:disabled { opacity: .55; cursor: progress; }
.efc-modal__share-option-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(26, 53, 80, .08);
	color: var(--efc-navy-800, #1a3550);
	flex: 0 0 auto;
}
.efc-modal__share-option-label { flex: 1 1 auto; }
.efc-modal__share-option-hint {
	font-size: 12px;
	font-weight: 500;
	color: var(--efc-ink-500, #6b7280);
}

/* Mobile: keep all 3 buttons in one row but shrink padding + label */
@media (max-width: 520px) {
	.efc-modal__social-row { gap: 8px; }
	.efc-modal__social-btn { gap: 6px; padding: 11px 6px; flex-direction: column; }
	.efc-modal__social-btn-label { font-size: 11.5px; line-height: 1.2; }
	.efc-modal__social-btn-icon { width: 30px; height: 30px; }
	.efc-modal__social-btn-icon svg { width: 18px; height: 18px; }
}

/* "Try another photo" — plain underlined text link, centered at the
   bottom of the result step, no button chrome. */
.efc-modal__retry-row {
	margin: 18px 0 0;
	text-align: center;
}
button.efc-modal__retry-link,
.efc-modal__retry-link {
	background: transparent;
	border: 0;
	padding: 6px 4px;
	font: inherit;
	font-size: 13px;
	color: var(--efc-ink-500, #6b7280);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.efc-modal__retry-link:hover { color: var(--efc-navy-800, #1a3550); }
.efc-modal__retry-link:focus-visible { outline: 2px solid var(--efc-navy-800, #1a3550); outline-offset: 3px; border-radius: 3px; }
.efc-modal__retry-sep { color: var(--efc-ink-400, #969696); margin: 0 8px; font-size: 13px; }

/* Upload step — small breadcrumb back to email step */
.efc-modal__email-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 12px;
	color: var(--efc-ink-500, #6b7280);
}
.efc-modal__email-indicator strong { color: var(--efc-ink-800, #1f2937); font-weight: 600; }
.efc-modal__email-edit,
button.efc-modal__email-edit {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	color: var(--efc-navy-800, #1a3550);
	font: inherit;
	font-size: 12px;
	line-height: inherit;
	cursor: pointer;
	text-decoration: underline;
	box-shadow: none;
}
.efc-modal__email-edit:focus { outline: 2px solid var(--efc-navy-800, #1a3550); outline-offset: 2px; }

.efc-modal__result {
	display: block;
	width: 100%;
	height: auto;
	margin: 6px 0 0;
	border-radius: 10px;
	background: var(--efc-ink-100);
}

/* File uploader — large drop-zone-style label that doubles as a thumbnail
   preview once a file is chosen. The native <input> sits hidden inside. */
.efc-uploader {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	margin: 14px 0 0;
	border: 2px dashed var(--efc-accent-500);
	border-radius: 12px;
	background: rgba(210, 162, 119, 0.06);
	cursor: pointer;
	overflow: hidden;
	position: relative;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.efc-uploader:hover { background: rgba(210, 162, 119, 0.12); }
.efc-uploader.has-preview { border-style: solid; padding: 0; background: var(--efc-ink-100); }
.efc-uploader input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.efc-uploader__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 24px;
	text-align: center;
	pointer-events: none;
}
.efc-uploader__icon { font-size: 32px; }
.efc-uploader__cta { font-size: 15px; font-weight: 600; color: var(--efc-ink-900); }
.efc-uploader__hint { font-size: 12px; color: var(--efc-ink-500); }
.efc-uploader__preview { display: block; width: 100%; max-height: 320px; object-fit: contain; }

/* Spinner — same dimensions as a primary CTA so the "generating" step never
   collapses to a tiny dot on first paint. */
/* Loading "stage" — KORA watermark + shimmer + progress bar pinned bottom.
   Builds a sense of polished-brand waiting (versus a bare spinner) so the
   15–45s AI call doesn't feel empty. The shimmer sweeps every ~2.6s,
   independent of progress %, so the customer always sees movement even
   when the asymptotic curve is slowing down. */
.efc-modal__stage {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	min-height: 240px;
	margin: 8px 0 6px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background:
		linear-gradient(135deg, rgba(254, 250, 226, 0.85) 0%, #ffffff 55%, rgba(254, 249, 235, 0.95) 100%),
		var(--efc-bg-cream, #fefae2);
	border: 1px solid var(--efc-ink-200, #e5e7eb);
}
.efc-modal__stage-watermark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	user-select: none;
	font-family: "Krona One", "Cormorant Garamond", Georgia, serif;
	font-weight: 700;
	font-size: clamp(96px, 18vw, 168px);
	letter-spacing: 0.04em;
	color: rgba(26, 53, 80, 0.085);
	filter: blur(1.5px);
	line-height: 1;
}
.efc-modal__stage-shimmer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 30%,
		rgba(255, 255, 255, 0.65) 50%,
		transparent 70%
	);
	transform: translateX(120%);
	animation: efc-shimmer 2.6s ease-in-out infinite;
}
.efc-modal__stage-bottom {
	position: relative;
	z-index: 1;
	padding: 18px 22px 20px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
}
@keyframes efc-shimmer {
	0%   { transform: translateX(120%);  opacity: 0; }
	18%  { opacity: 1; }
	82%  { opacity: 1; }
	100% { transform: translateX(-120%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.efc-modal__stage-shimmer { animation: none; opacity: 0; }
}

/* Modal progress bar — replaces the old spinner in the 'generating' state.
   Namespaced under `.efc-modal__progress` so it doesn't collide with the
   step-counter `.efc-progress` already on the page. The width transition
   gives the appearance of smooth progress between the asymptotic-curve
   ticks emitted from JS every 250ms. */
.efc-modal__progress { margin: 0; }
.efc-modal__progress-track {
	height: 10px;
	background: var(--efc-ink-100, #f1f3f5);
	border: 1px solid var(--efc-ink-200, #e5e7eb);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}
.efc-modal__progress-fill {
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--efc-navy-800, #1a3550), var(--efc-accent-500, #d2a277));
	border-radius: 999px;
	transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.efc-modal__progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 12px;
	gap: 12px;
}
.efc-modal__progress-label {
	color: var(--efc-ink-700, #374151);
	font-size: 14px;
	line-height: 1.4;
}
.efc-modal__progress-pct {
	font-weight: 700;
	font-size: 18px;
	color: var(--efc-navy-800, #1a3550);
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

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

/* ============== Step group (multiple dropdowns under one heading) ==============
   When two or more steps share a group_id, they render under a single heading
   (e.g. "מידות" wraps both אורך and עומק as side-by-side dropdowns). */

.efc-step__group { display: block; }
.efc-step__group--row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.efc-step__group-item { min-width: 0; }
.efc-step__sub-header { margin: 0 0 10px; }
.efc-step__sub-label {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--efc-ink-700);
}
.efc-step__sub-desc {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--efc-ink-700);
}

/* ============== Dropdown / select (Figma pill style) ==============
   Matches KORA-SHOP Figma node 28:2: border 1px solid #969696, border-radius
   100px (pill), height 45.58px, white background, SVG chevron on the LEFT
   (RTL flow), right-aligned text. */

/* Dropdown + live price badge sit on one row. In RTL the select takes the
   right side (start) and the modifier badge floats to its left, matching
   niv-design's pattern where the chosen size's surcharge sits beside the field
   rather than baked into each option label. */
.efc-select-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
}
.efc-select-modifier {
	font-size: 16px;
	font-weight: 700;
	color: var(--efc-ink-900);
	white-space: nowrap;
}

.efc-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 260px;
	height: 45.58px;
	padding: 0 20px 0 44px;
	background-color: var(--efc-surface);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1L6 6L11 1' stroke='%23424242' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: left 18px center;
	background-size: 12px 8px;
	border: 1px solid var(--efc-ink-400);
	border-radius: var(--efc-r-pill);
	color: var(--efc-ink-700);
	font-family: var(--efc-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 45.58px;
	text-align: right;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.efc-select:hover { border-color: var(--efc-accent-500); }
.efc-select:focus-visible { outline: 0; border-color: var(--efc-ink-900); box-shadow: var(--efc-focus); }
.efc-select option { color: var(--efc-ink-900); background: var(--efc-surface); padding: 6px 12px; font-size: 16px; }

/* ============== Mobile responsive (< 768px) ============== */
/* Tal's spec: 2 per row for image/swatch grids, 1 per row for selects/dropdowns,
   and image cards should appear MORE SQUARE than rectangular on mobile. */

@media (max-width: 767px) {
	/* Image-buttons (סגנון): 2 per row, still square */
	.efc-img-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	/* Fabric-swatch: 2 per row + more square (4:3 instead of 158:91) */
	.efc-swatch-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px 14px;
	}
	.efc-swatch img,
	.efc-swatch__placeholder {
		aspect-ratio: 4 / 3;
	}

	/* Color row stays wrap but tighter */
	.efc-color-row { gap: 10px; }

	/* Pills wrap nicely */
	.efc-pills { gap: 8px; }
	.efc-pill { padding: 10px 16px; font-size: 14px; }

	/* Dropdowns + radio + quantity → full width, 1 per row */
	.efc-select,
	.efc-radio-group,
	.efc-qty,
	.efc-slider { width: 100%; max-width: 100%; }

	/* Step groups → single column on mobile */
	.efc-step__group--row { grid-template-columns: 1fr; gap: 18px; }
	.efc-step__sub-label { font-size: 16px; }
	.efc-step__sub-desc  { font-size: 13px; }

	/* Step header: keep RTL order but smaller index */
	.efc-step__index { font-size: 28px; }
	.efc-step__label { font-size: 20px; }
	.efc-step__desc  { font-size: 14px; }
	.efc-step { padding: 24px 0 20px; }

	/* Select + live modifier badge row: the select grows to fill, the badge
	   keeps natural width so it doesn't get pushed off-screen by the 100%-wide
	   select rule above. */
	.efc-select-wrap > .efc-select { flex: 1 1 auto; min-width: 0; }
	.efc-select-modifier { font-size: 15px; }

	/* Bump `button.efc-pill` so the mobile padding actually wins (the desktop
	   `.efc-pill { padding: 10px 22px }` lives at (0,1,0); the .is-active fight
	   forced us to (0,1,1), so re-assert mobile padding at the same level). */
	button.efc-pill { padding: 10px 14px; font-size: 13px; }

	/* CTA pair stacks vertically — thumb-friendly + each button gets full width. */
	.efc-cta-row { flex-direction: column; }
}