/*
 * Help Popup — Figma HELP_OVERLAY_DESKTOP_1920 (287:3), _1440 (287:43),
 * _TABLET_1024 (287:83) and _MOBILE_424 (287:123).
 *
 * The three wide frames carry an identical 486x510 dialog at identical inner
 * coordinates, so there are two compositions, not four: the 424 frame below
 * 768px, the 486px dialog above it. Every size below is the frame's own value.
 *
 * The dialog's height is the one deliberate deviation: the frame is a fixed
 * 510px around its own field set, while this build also carries email, the
 * marketing-consent checkbox, the image row and the "just a question" routes.
 * Paddings, gaps, field heights, radii and type sizes are the frame's; height
 * grows with content and scrolls when it must.
 */

.nios-help {
	--nh-surface: #ffffff;
	--nh-soft: #fff9f2;
	--nh-border: #e7d9c8;
	--nh-ink: #21170f;
	--nh-muted: #74685e;
	--nh-gold: #b98647;
	--nh-dark: #281c14;
	--nh-error: #a02222;
	--nh-ok: #1e6b34;

	position: fixed;
	inset: 0;
	z-index: 10040; /* above the cart drawer (10020) and the cookie banner */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
	direction: rtl;
	font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.nios-help[hidden] {
	display: none;
}

/* Backdrop: the site stays visible and readable behind a soft blur, per the
   frame's blur(4px) + 28% dim, rather than being hidden behind a flat scrim. */
.nios-help__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(40, 28, 20, 0.28);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: nios-help-fade 0.2s ease-out;
}

@supports not (backdrop-filter: blur(4px)) {
	.nios-help__backdrop {
		background: rgba(40, 28, 20, 0.55);
	}
}

.nios-help__dialog {
	position: relative;
	width: 486px;
	max-width: 100%;
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	box-sizing: border-box;
	background: var(--nh-surface);
	border: 1px solid var(--nh-border);
	border-radius: 18px;
	padding: 24px 28px 22px;
	box-shadow: 0 24px 60px rgba(40, 28, 20, 0.22);
	animation: nios-help-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
	-webkit-overflow-scrolling: touch;
}

.nios-help__dialog:focus {
	outline: none;
}

@keyframes nios-help-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes nios-help-in {
	from { opacity: 0; transform: translateY(10px) scale(0.985); }
	to { opacity: 1; transform: none; }
}

/* Close — 38px circle on the physical left, exactly as in every frame. */
.nios-help__close {
	position: absolute;
	top: 15px;
	left: 17px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--nh-ink);
	background: var(--nh-soft);
	border: 1px solid var(--nh-border);
	border-radius: 19px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.nios-help__close:hover {
	background: #f6ead9;
	border-color: var(--nh-gold);
}

.nios-help__close:focus-visible,
.nios-help__submit:focus-visible,
.nios-help__reason-input:focus-visible + .nios-help__reason-label,
.nios-help__route:focus-visible,
.nios-help__input:focus-visible,
.nios-help__file:focus-visible + .nios-help__file-label,
.nios-help__link:focus-visible,
.nios-help__checkbox:focus-visible,
.nios-help-trigger:focus-visible {
	outline: 2px solid var(--nh-gold);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ intro */

.nios-help__eyebrow {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nh-gold);
	padding-inline-start: 46px; /* clears the close button */
}

.nios-help__heading {
	margin: 17px 0 0;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nh-ink);
}

.nios-help__body {
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--nh-muted);
}

.nios-help__label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--nh-ink);
	margin: 0 0 6px;
}

.nios-help__req {
	color: var(--nh-gold);
}

/* ---------------------------------------------------------------- reasons */

.nios-help__reasons {
	margin: 19px 0 0;
	padding: 0;
	border: 0;
}

.nios-help__reasons .nios-help__label {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 11px;
	padding: 0;
}

/* The frame lays the three options out left-to-right regardless of the page's
   RTL (the same thing already settled once for the homepage gift finder), so
   the row is forced LTR and each option's own text restored to RTL. */
.nios-help__reason-row {
	display: flex;
	direction: ltr;
	gap: 6px;
}

.nios-help__reason {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	direction: rtl;
}

.nios-help__reason-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.nios-help__reason-label {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 4px 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: var(--nh-ink);
	background: var(--nh-surface);
	border: 1px solid var(--nh-border);
	border-radius: 9px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nios-help__reason-label:hover {
	border-color: var(--nh-gold);
}

.nios-help__reason-input:checked + .nios-help__reason-label {
	background: var(--nh-dark);
	border-color: var(--nh-dark);
	color: #ffffff;
}

/* ----------------------------------------------------------------- routes */

.nios-help__routes {
	margin: 14px 0 0;
	padding: 12px;
	background: var(--nh-soft);
	border: 1px solid var(--nh-border);
	border-radius: 10px;
}

.nios-help__routes[hidden] {
	display: none;
}

.nios-help__label--inline {
	margin-bottom: 8px;
}

.nios-help__route-row {
	display: flex;
	gap: 8px;
}

.nios-help__route {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 4px 10px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--nh-ink);
	background: var(--nh-surface);
	border: 1px solid var(--nh-border);
	border-radius: 9px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nios-help__route:hover {
	border-color: var(--nh-gold);
}

.nios-help__route.is-selected {
	background: var(--nh-dark);
	border-color: var(--nh-dark);
	color: #ffffff;
}

.nios-help__route-icon {
	display: inline-flex;
	flex-shrink: 0;
}

/* ----------------------------------------------------------------- fields */

.nios-help__field {
	margin: 13px 0 0;
}

.nios-help__field[hidden] {
	display: none;
}

.nios-help__row {
	display: flex;
	gap: 10px;
	margin: 19px 0 0;
}

.nios-help__field--half {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

.nios-help__input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 46px;
	padding: 0 12px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.3;
	color: var(--nh-ink);
	background: var(--nh-surface);
	border: 1px solid var(--nh-border);
	border-radius: 8px;
	appearance: none;
	transition: border-color 0.15s ease;
}

.nios-help__input::placeholder {
	color: var(--nh-muted);
	opacity: 1;
}

.nios-help__input:hover {
	border-color: #dbc9b2;
}

.nios-help__textarea {
	height: 58px;
	min-height: 58px;
	padding: 10px 12px;
	resize: vertical;
}

.nios-help__input.is-invalid {
	border-color: var(--nh-error);
}

/* ------------------------------------------------------------------ image */

.nios-help__image-reuse {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: var(--nh-soft);
	border: 1px solid var(--nh-border);
	border-radius: 8px;
}

.nios-help__image-reuse[hidden] {
	display: none;
}

.nios-help__image-thumb {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 6px;
	background: #f0e6da;
}

.nios-help__image-text {
	flex: 1;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--nh-ink);
}

.nios-help__link {
	padding: 0;
	font-family: inherit;
	font-size: 12px;
	color: var(--nh-gold);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}

.nios-help__link:hover {
	color: var(--nh-ink);
}

.nios-help__image-pick[hidden] {
	display: none;
}

.nios-help__file {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.nios-help__file-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--nh-ink);
	background: var(--nh-surface);
	border: 1px dashed var(--nh-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.nios-help__file-label:hover {
	border-color: var(--nh-gold);
	background: var(--nh-soft);
}

.nios-help__file-icon {
	display: inline-flex;
	color: var(--nh-gold);
}

.nios-help__file-status {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.35;
	color: var(--nh-muted);
}

.nios-help__file-status.is-error {
	color: var(--nh-error);
}

/* ---------------------------------------------------------------- consent */

.nios-help__consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0;
}

.nios-help__checkbox {
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	flex-shrink: 0;
	accent-color: var(--nh-dark);
	cursor: pointer;
}

.nios-help__consent-label {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--nh-muted);
	cursor: pointer;
}

.nios-help__consent-label a {
	color: var(--nh-gold);
	text-decoration: underline;
}

/* --------------------------------------------------------- submit + legal */

.nios-help__error {
	margin: 12px 0 0;
	padding: 9px 11px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--nh-error);
	background: #fbeaea;
	border-radius: 8px;
}

.nios-help__error[hidden] {
	display: none;
}

.nios-help__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 49px;
	margin: 15px 0 0;
	padding: 0 16px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #ffffff;
	background: var(--nh-dark);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.nios-help__submit:hover:not(:disabled) {
	background: #3a291d;
	transform: translateY(-1px);
}

.nios-help__submit:active:not(:disabled) {
	transform: none;
}

.nios-help__submit:disabled {
	opacity: 0.55;
	cursor: default;
}

.nios-help__spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: nios-help-spin 0.7s linear infinite;
}

.nios-help__spinner[hidden] {
	display: none;
}

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

.nios-help__legal {
	margin: 9px 0 0;
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
	color: var(--nh-muted);
}

/* Honeypot — hidden by clipping, not by an off-screen offset: inside a
   scrollable dialog a left:-9999px child creates a 10,000px scroll area. */
.nios-help__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- success */

.nios-help__success {
	text-align: center;
	padding: 10px 0 4px;
}

.nios-help__success[hidden] {
	display: none;
}

.nios-help__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 14px;
	color: var(--nh-ok);
	background: #eaf5ec;
	border-radius: 50%;
}

.nios-help__success-title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nh-ink);
}

.nios-help__success-body {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--nh-muted);
}

.nios-help__wa-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 20px;
	font-size: 14.5px;
	font-weight: 600;
	color: #ffffff;
	background: var(--nh-dark);
	border-radius: 10px;
	text-decoration: none;
}

.nios-help__wa-link[hidden] {
	display: none;
}

.nios-help__wa-link:hover {
	background: #3a291d;
	color: #ffffff;
}

.nios-help__success-close {
	display: block;
	margin: 14px auto 0;
	padding: 6px 10px;
	font-family: inherit;
	font-size: 13px;
	color: var(--nh-muted);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}

/* --------------------------------------------------------------- triggers */

.nios-help-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	font-family: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	/* The colour scheme comes from the popup's own settings as custom
	   properties on the element (nios_help_color_style()); these fallbacks are
	   the default cream scheme, for the rare case the attribute is missing. */
	color: var(--nht-text, #21170f);
	background: var(--nht-bg, #fff9f2);
	border: 1px solid var(--nht-border, #e4d9cb);
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.nios-help-trigger:hover {
	background: var(--nht-bg-hover, #fdf1e2);
	border-color: var(--nht-border-hover, #b98647);
}

.nios-help-trigger__icon {
	display: inline-flex;
	color: var(--nht-icon, #b98647);
}

.nios-help-trigger--inline {
	width: 100%;
	max-width: 420px;
	margin: 18px 0 0;
}

/* Inside the engraving preview's zoom toolbar: same 44px height and radius as
   its own .ppl-iconbtn controls, so it reads as a sibling control rather than
   something bolted on. Colours come from the chosen scheme. */
.nios-help-trigger--toolbar {
	min-height: 44px;
	padding: 0 14px;
	font-size: 14px;
}

/* A text link keeps the gold regardless of the chosen scheme: a fill palette's
   text colour (white, on the dark and gold schemes) would vanish here. */
.nios-help-trigger--link {
	min-height: 0;
	padding: 0;
	background: none;
	border: 0;
	text-decoration: underline;
	color: #b98647;
}

.nios-help-trigger--link:hover {
	background: none;
	color: #ad6c22;
}

.nios-help-trigger--float {
	box-shadow: 0 10px 26px rgba(40, 28, 20, 0.3);
}

.nios-help-trigger--float:hover {
	transform: translateY(-1px);
}

.nios-help-float {
	position: fixed;
	bottom: calc(22px + env(safe-area-inset-bottom, 0px));
	z-index: 9980; /* under the accessibility widget and the cookie banner */
}

.nios-help-float[hidden] {
	display: none;
}

.nios-help-float--left {
	left: 22px;
}

.nios-help-float--right {
	right: 22px;
}

/* While the cookie banner is up, the float steps above it rather than over it
   (help-popup.js sets this class; the 2026-09-15 accessibility/cookie collision
   is the reason this is handled explicitly instead of hoped for). */
.nios-help-float.is-shifted {
	bottom: calc(168px + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------- scroll locking */

body.nios-help-open {
	overflow: hidden;
}

/* ------------------------------------------------------- mobile (frame 424) */

@media (max-width: 767px) {
	.nios-help {
		padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.nios-help__dialog {
		width: 100%;
		max-height: calc(100dvh - 32px);
		padding: 24px 21px 20px;
	}

	.nios-help__heading {
		font-size: 27px;
	}

	.nios-help__reason-row {
		flex-wrap: wrap;
		gap: 8px;
	}

	.nios-help__reason {
		flex: 1 1 calc(50% - 4px);
	}

	/* A trailing odd option spans the row, as "רק שאלה" does in the frame. */
	.nios-help__reason:last-child:nth-child(odd) {
		flex-basis: 100%;
	}

	.nios-help__textarea {
		height: 68px;
		min-height: 68px;
	}

	.nios-help__row {
		flex-direction: column;
		gap: 0;
	}

	.nios-help__field--half + .nios-help__field--half {
		margin-top: 13px;
	}

	.nios-help__route-row {
		flex-direction: column;
	}

	.nios-help-float--left {
		left: 16px;
	}

	.nios-help-float--right {
		right: 16px;
	}

	.nios-help-trigger--float .nios-help-trigger__label {
		display: none;
	}

	.nios-help-trigger--float {
		width: 52px;
		min-height: 52px;
		padding: 0;
		border-radius: 26px;
	}
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.nios-help__dialog,
	.nios-help__backdrop {
		animation: none;
	}

	.nios-help__submit:hover:not(:disabled),
	.nios-help-trigger--float:hover {
		transform: none;
	}

	.nios-help__spinner {
		animation-duration: 2s;
	}
}

/* The accessibility widget's own "stop animations" switch (it sets
   a11y-stop-animations; matched as an ancestor so it works on html or body). */
.a11y-stop-animations .nios-help__dialog,
.a11y-stop-animations .nios-help__backdrop,
.a11y-stop-animations .nios-help__spinner {
	animation: none;
}