/* =======================================================================
   S04 Before / After — the 4-step journey (Naor's approved redesign,
   2026-09-20). Loaded after style.css by inc/before-after/journey-assets.php.

   The preview internals (images, the four layers, divider, handle) keep
   their original .before-after-s04__* rules from style.css, including the
   hard-won mix-blend-mode / stacking notes there. This file adds the
   journey layout around them and overrides only what the new model
   changes: a fixed 3:2 landscape frame, "before" on the RIGHT, zoom panes.
   Every override is scoped under .ba-journey so it wins by specificity,
   not by load order.

   Mobile-first: base = phones, 768px+ = tablet, 992px+ = two columns.
   ======================================================================= */
.ba-journey {
	--bj-card: #ffffff;
	--bj-line: #ded1bd;
	--bj-soft: #f6ecda;
	--bj-ink: #2b2722;
	--bj-muted: #655b4f;
	--bj-accent: #ad6c22;
	--bj-accent-dark: #8c5519;
	--bj-ok: #4f7d32;
	--bj-warn-bg: #fbeadf;
	--bj-warn-ink: #7a2f12;
	--bj-tip-gold: #f2c078;
	direction: rtl;
}
/* Hero "התחילו לעצב" jumps here: keep the heading clear of the sticky header (78px) and glide there unless motion is reduced. */
.ba-journey { scroll-margin-top: 94px; }
@media (prefers-reduced-motion: no-preference) {
	html:not(.a11y-stop-animations) { scroll-behavior: smooth; }
}

.ba-journey .before-after-s04__inner { max-width: 1296px; }
.ba-journey .before-after-s04__header { margin-bottom: 18px; }
.ba-journey__noscript { margin: 0 0 16px; text-align: center; color: var(--bj-muted); }
.ba-journey :focus-visible { outline: 2px solid var(--bj-accent); outline-offset: 2px; }
.ba-journey button { font-family: var(--nios-font); cursor: pointer; }
.ba-journey button:disabled { cursor: default; }

/* ---- Stepper ---- */
.ba-journey__stepper {
	display: flex;
	align-items: center;
	max-width: 980px;
	margin: 0 auto 20px;
	padding: 0;
	list-style: none;
}
.ba-journey__stepper-item { flex: 1; display: flex; align-items: center; min-width: 0; }
.ba-journey__stepper-item:last-child { flex: none; }
.ba-journey__stepper-item:not(:last-child)::after {
	content: "";
	flex: 1;
	height: 2px;
	margin-inline: 8px;
	background: var(--bj-line);
}
.ba-journey__stepper-item.is-done:not(:last-child)::after { background: var(--bj-ok); }
.ba-journey__stepper-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 4px;
	border: 0;
	background: none;
	font-weight: 600;
	font-size: 14px;
	color: var(--bj-muted);
}
.ba-journey__stepper-dot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--bj-line);
	border-radius: 50%;
	background: #fff;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--bj-muted);
}
/* Phones: only the current step shows its name; the rest stay as numbered dots. */
.ba-journey__stepper-item:not(.is-current) .ba-journey__stepper-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.ba-journey__stepper-item.is-current .ba-journey__stepper-btn { color: var(--bj-ink); }
.ba-journey__stepper-item.is-current .ba-journey__stepper-dot { border-color: var(--bj-ink); background: var(--bj-ink); color: #fff; }
.ba-journey__stepper-item.is-done .ba-journey__stepper-btn { color: var(--bj-ink); }
.ba-journey__stepper-item.is-done .ba-journey__stepper-dot { border-color: var(--bj-ok); background: var(--bj-ok); color: #fff; }

/* ---- Shell + cards ---- */
.ba-journey__shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ba-journey__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--bj-line);
	border-radius: 18px;
	background: var(--bj-card);
}
.ba-journey__card--panel { gap: 14px; padding: 16px; }
/* Phones: while choosing (steps 1 and 2) the choices come first; while designing, the preview does. */
.ba-journey[data-ba-step="1"] .ba-journey__card--preview,
.ba-journey[data-ba-step="2"] .ba-journey__card--preview { order: 2; }

/* ---- Preview: fixed 3:2 landscape frame, zoom panes, "before" on the left of the handle ---- */
.ba-journey .before-after-s04__preview-media {
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 12px;
	background: #f3ead9;
	container-type: inline-size; /* the layers below size themselves relative to this frame */
}
.ba-journey__pane { position: absolute; inset: 0; overflow: hidden; }
.ba-journey__pane--before.is-animated { transition: clip-path 0.25s ease; }
/* The zoom scales the photo together with the layers on top of it, so the
   layers' mix-blend-mode still blends against the photo inside the same
   stacking context (see the notes above .before-after-s04__layers in style.css). */
.ba-journey__zoom { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform 0.25s ease; }
.ba-journey .before-after-s04__label { top: 12px; }
.ba-journey .before-after-s04__label--before { right: auto; left: 12px; }
.ba-journey .before-after-s04__label--after { left: auto; right: 12px; }
/* Layer content scales with the frame (588px wide on desktop = the original
   20/14/32/140px sizes), so a design made on a phone matches one made on desktop. */
.ba-journey .before-after-s04__layer-text { font-size: max(9px, 3.4cqw); }
.ba-journey .before-after-s04__layer-greeting { font-size: max(7px, 2.4cqw); }
/* Line breaks the visitor typed are engraved as centered lines (2026-10-08). */
.ba-journey .before-after-s04__layer-text,
.ba-journey .before-after-s04__layer-greeting { white-space: pre; text-align: center; }
.ba-journey .before-after-s04__layer-icon { width: max(14px, 5.4cqw); height: max(14px, 5.4cqw); }
.ba-journey .before-after-s04__layer-img { max-width: max(60px, 23.8cqw); max-height: max(60px, 23.8cqw); }

/* LTR on purpose: minus on the left, plus on the right, as on every zoom control. */
.ba-journey__zoombar { display: flex; align-items: center; justify-content: center; gap: 8px; direction: ltr; }
.ba-journey__zoombtn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--bj-line);
	border-radius: 12px;
	background: #fff;
	color: var(--bj-ink);
	transition: border-color 0.15s ease;
}
.ba-journey__panbar { margin-top: -4px; }
.ba-journey__panbar .ba-journey__zoombtn { width: 52px; }
/* While zoomed, the photo itself is draggable: stop the page from scrolling under a touch drag. */
.ba-journey.is-zoomed .before-after-s04__preview-media { touch-action: none; cursor: grab; }
.ba-journey.is-zoomed .before-after-s04__preview-media.is-panning { cursor: grabbing; }
/* Dragging must follow the pointer exactly: no easing while the photo is being dragged. */
.ba-journey .before-after-s04__preview-media.is-panning .ba-journey__zoom { transition: none; }
.ba-journey__zoombtn--label { width: 84px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ba-journey__zoombtn:hover:not(:disabled) { border-color: var(--bj-ink); }
.ba-journey__zoombtn:disabled { opacity: 0.38; }

.ba-journey__disclaimer {
	margin: 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.55;
	color: var(--bj-muted);
	text-wrap: balance;
}

/* ---- Tip, styled as a tooltip bubble pointing up at the preview ---- */
.ba-journey__tip {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 8px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--bj-ink);
	color: #fff;
	font-size: 14.5px;
	line-height: 1.55;
	box-shadow: 0 12px 28px rgba(43, 39, 34, 0.3);
}
.ba-journey__tip::before {
	content: "";
	position: absolute;
	top: -7px;
	inset-inline-start: 36px;
	width: 14px;
	height: 14px;
	border-radius: 3px 0 0 0;
	background: var(--bj-ink);
	transform: rotate(45deg);
}
.ba-journey__tip-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--bj-tip-gold);
	color: var(--bj-ink);
}
.ba-journey__tip-body { display: flex; flex-direction: column; gap: 2px; }
.ba-journey__tip-label { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--bj-tip-gold); }

/* ---- Panel chrome ---- */
.ba-journey__status { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.ba-journey__status-text { font-size: 13px; color: var(--bj-muted); white-space: nowrap; }
.ba-journey__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: #f4ebdc;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
.ba-journey__pill > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ba-journey__pill-price { flex: none; white-space: nowrap; }
.ba-journey__progress { height: 4px; border-radius: 2px; background: var(--bj-line); overflow: hidden; }
.ba-journey__progress i { display: block; height: 100%; background: var(--bj-accent); transition: width 0.25s ease; }
.ba-journey__ribbon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--bj-soft);
	font-size: 14px;
}
.ba-journey__link {
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--bj-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ba-journey__panel { display: flex; flex-direction: column; gap: 14px; flex-grow: 1; }
.ba-journey__panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ba-journey__panel-title { margin: 0; font: 800 20px/1.25 var(--nios-font); color: var(--bj-ink); }
.ba-journey__panel-title:focus { outline: none; }
.ba-journey__hover-hint { display: none; font-size: 13px; color: var(--bj-muted); }

/* ---- Step 1: product types ---- */
.ba-journey__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ba-journey__cat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 6px 6px 12px;
	border: 1px solid var(--bj-line);
	border-radius: 14px;
	background: #fff;
	text-align: start;
	color: var(--bj-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ba-journey__cat:hover { border-color: var(--bj-ink); }
.ba-journey__cat.is-selected { border-color: var(--bj-ink); box-shadow: inset 0 0 0 1px var(--bj-ink); }
.ba-journey__cat-img { display: block; aspect-ratio: 1 / 1; margin-bottom: 8px; border-radius: 10px; overflow: hidden; background: #f3ead9; }
.ba-journey__cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.ba-journey__cat:hover .ba-journey__cat-img img { transform: scale(1.05); }
.ba-journey__cat-label { padding-inline: 4px; font-size: 15px; font-weight: 800; line-height: 1.2; }
.ba-journey__cat-hint { padding-inline: 4px; font-size: 12px; color: var(--bj-muted); }

/* ---- Step 2: models, one per row ---- */
.ba-journey__models { display: flex; flex-direction: column; gap: 10px; }
.ba-journey__model {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	min-height: 84px;
	padding: 8px 10px;
	border: 1px solid var(--bj-line);
	border-radius: 12px;
	background: #fff;
	text-align: start;
	color: var(--bj-ink);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ba-journey__model:hover { border-color: var(--bj-ink); }
.ba-journey__model.is-selected { border-color: var(--bj-ink); box-shadow: inset 0 0 0 1px var(--bj-ink); }
.ba-journey__model-thumb { display: block; aspect-ratio: 3 / 2; }
.ba-journey__model-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	transform-origin: left center; /* RTL: the photo sits on the right, so it grows outward, away from the model's name */
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ba-journey__model-name { font-size: 14px; font-weight: 700; line-height: 1.35; }
.ba-journey__model-price { font-size: 18px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ba-journey__model-price del { font-size: 13px; font-weight: 400; color: var(--bj-muted); }
.ba-journey__model-price ins { text-decoration: none; }
/* Hovering a row (or reaching it with the keyboard) lifts its photo a little larger. */
@media (hover: hover) {
	.ba-journey__hover-hint { display: inline; }
	.ba-journey__model:hover,
	.ba-journey__model:focus-visible { z-index: 2; }
	.ba-journey__model:hover .ba-journey__model-thumb img,
	.ba-journey__model:focus-visible .ba-journey__model-thumb img {
		transform: scale(1.3);
		box-shadow: 0 14px 30px rgba(43, 39, 34, 0.3);
	}
}

/* ---- Step 3: design tools ---- */
.ba-journey__field { display: flex; flex-direction: column; gap: 7px; }
.ba-journey__field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; color: var(--bj-ink); }
.ba-journey__optional { font-weight: 400; color: var(--bj-muted); }
.ba-journey__counter { direction: ltr; font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--bj-muted); }
.ba-journey__input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--bj-line);
	border-radius: 10px;
	background: #fff;
	font: 400 16px/1 var(--nios-font); /* 16px keeps iOS from zooming the page on focus */
	color: var(--bj-ink);
}
.ba-journey__input::placeholder { color: var(--bj-muted); opacity: 1; }
/* Multi-line text and greeting (2026-10-08): Enter starts a new line, the box grows (before-after.js). */
.ba-journey__input--multi { display: block; height: auto; min-height: 48px; padding: 13px 14px; line-height: 1.4; resize: none; overflow: hidden; white-space: pre-wrap; }
.ba-journey__hint { margin: 0; font-size: 12px; line-height: 18px; color: var(--bj-muted); }
.ba-journey__input:focus { border-color: var(--bj-ink); }
.ba-journey__icons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ba-journey__icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0;
	border: 1px solid var(--bj-line);
	border-radius: 10px;
	background: #fff;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.ba-journey__icon-btn img { width: 22px; height: 22px; }
.ba-journey__icon-btn:hover { border-color: var(--bj-ink); }
.ba-journey__icon-btn.is-selected { border-color: var(--bj-ink); background: var(--bj-ink); }
.ba-journey__icon-btn.is-selected img { filter: invert(1); }
.ba-journey__upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.ba-journey__upload-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 16px;
	border: 1px dashed var(--bj-muted);
	border-radius: 10px;
	background: #fff;
	font-size: 15px;
	font-weight: 500;
	color: var(--bj-ink);
}
.ba-journey__upload-btn:hover { border-color: var(--bj-ink); border-style: solid; }
.ba-journey__upload-thumb { width: 48px; height: 48px; border-radius: 10px; background: #f3ead9 center / cover no-repeat; }
.ba-journey__helper { margin: 0; font-size: 13px; color: var(--bj-muted); }
.ba-journey__helper[data-state="error"] { color: var(--bj-warn-ink); font-weight: 600; }
.ba-journey__helper[data-state="success"] { color: #2f5a1c; }
.ba-journey__warn { margin: 0; font-size: 14px; font-weight: 600; color: var(--bj-warn-ink); }

/* ---- Step 4: summary ---- */
.ba-journey__summary { margin: 0; display: flex; flex-direction: column; }
.ba-journey__summary-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid #e8dccb; }
.ba-journey__summary-row:last-child { border-bottom: 0; }
.ba-journey__summary-row dt { flex: none; width: 96px; font-size: 14px; color: var(--bj-muted); }
.ba-journey__summary-row dd { margin: 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere; color: var(--bj-ink); }
.ba-journey__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--bj-line);
	font-size: 17px;
	font-weight: 700;
	color: var(--bj-ink);
}
.ba-journey__total strong { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ba-journey .before-after-s04__cta-status { margin: 0; color: var(--bj-warn-ink); font-weight: 600; }

/* ---- Nav ---- */
.ba-journey__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 14px; border-top: 1px solid var(--bj-line); }
.ba-journey__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 16px;
	border-radius: 12px;
	font-size: 17px;
	font-weight: 700;
	transition: filter 0.15s ease, border-color 0.15s ease;
}
.ba-journey__btn--ghost { border: 1px solid var(--bj-line); background: #fff; color: var(--bj-ink); font-weight: 600; }
.ba-journey__btn--ghost:hover { border-color: var(--bj-ink); }
.ba-journey__btn--primary { border: 0; background: var(--bj-ink); color: #fff; }
.ba-journey__btn--primary:hover { filter: brightness(1.2); }

/* ---- Waiting popup (no close button on purpose) ---- */
.ba-journey__modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(28, 22, 16, 0.6);
}
.ba-journey__modal-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 500px;
	padding: 26px 22px;
	border-radius: 16px;
	background: #fffdf9;
	color: var(--bj-ink);
	text-align: center;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.ba-journey__modal-box:focus { outline: none; }
.ba-journey__spinner {
	width: 52px;
	height: 52px;
	border: 5px solid #e8dccb;
	border-top-color: var(--bj-accent);
	border-radius: 50%;
	animation: ba-journey-spin 1.1s linear infinite;
}
@keyframes ba-journey-spin { to { transform: rotate(360deg); } }
.ba-journey__modal-title { margin: 0; font: 800 22px/1.25 var(--nios-font); }
.ba-journey__modal-text { margin: 0; font-size: 16px; line-height: 1.6; }
.ba-journey__modal-bar { width: 100%; height: 10px; border-radius: 5px; background: #e8dccb; overflow: hidden; }
.ba-journey__modal-bar i { display: block; width: 0; height: 100%; border-radius: 5px; background: var(--bj-accent); transition: width 0.15s linear; }
.ba-journey__modal-meta {
	display: flex;
	justify-content: space-between;
	width: 100%;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bj-muted);
}
.ba-journey__modal-warning {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--bj-warn-bg);
	color: var(--bj-warn-ink);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.5;
	text-align: start;
}
.ba-journey__modal-warning svg { flex: none; margin-top: 1px; }

@media (prefers-reduced-motion: reduce) {
	.ba-journey__zoom,
	.ba-journey__progress i,
	.ba-journey__cat-img img,
	.ba-journey__model-thumb img,
	.ba-journey__modal-bar i { transition: none; }
	.ba-journey__spinner { animation-duration: 3s; }
}

/* ---- Tablet 768+ ---- */
@media (min-width: 768px) {
	.ba-journey__stepper { margin-bottom: 24px; }
	.ba-journey__stepper-item:not(:last-child)::after { margin-inline: 12px; }
	.ba-journey__stepper-btn { gap: 10px; font-size: 15px; }
	.ba-journey__stepper-item:not(.is-current) .ba-journey__stepper-label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
	}
	.ba-journey__card { padding: 14px; }
	.ba-journey__card--panel { gap: 16px; padding: 22px 24px 20px; }
	.ba-journey__panel-title { font-size: 22px; }
	.ba-journey__cats { gap: 12px; }
	.ba-journey__cat { padding: 8px 8px 14px; }
	.ba-journey__cat-label { font-size: 19px; }
	.ba-journey__cat-hint { font-size: 13px; }
	.ba-journey__models { gap: 12px; }
	.ba-journey__model { grid-template-columns: 138px minmax(0, 1fr) auto; gap: 18px; padding: 10px 18px 10px 16px; }
	.ba-journey__model-name { font-size: 17px; }
	.ba-journey__model-price { font-size: 22px; }
	.ba-journey__modal-box { padding: 30px 28px; }
}

/* ---- Two columns 992+: preview on the right (first in RTL), panel on the left ---- */
@media (min-width: 992px) {
	.ba-journey__shell { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
	.ba-journey[data-ba-step="1"] .ba-journey__card--preview,
	.ba-journey[data-ba-step="2"] .ba-journey__card--preview { order: 0; }
	.ba-journey__card--preview { justify-content: center; }
	.ba-journey__card--panel { min-height: 560px; }
}