/*
 * טופס ההזמנה — .rsf
 * כל צבע ופונט נמשך מהקיט של אלמנטור (--e-global-*), עם ערך גיבוי זהה.
 * שינוי בקיט = שינוי בטופס. מידות ב-vw מול 1920 (דסקטופ) ו-390 (מובייל), RULES §0.
 */

.rsf {
	--rsf-navy: var(--e-global-color-primary, #0B1B30);
	--rsf-navy2: var(--e-global-color-rs_navy2, #132A47);
	--rsf-gold: var(--e-global-color-accent, #E2B263);
	--rsf-light: var(--e-global-color-rs_light, #FBFAF7);
	--rsf-soft: var(--e-global-color-rs_light_soft, #C3CCD8);
	/* כרטיס בהיר — תיקון הלקוחה 21.10: "הרקע ללבן וכיתוב בולט מאוד ושחור מודגש".
	   נמדד מול הכרטיס #FBFAF7: דיו 17:1 · משני 8.6:1 · זהב עמוק (טקסט) 5.7:1 ·
	   מסגרת שדה/כפתור קטגוריה 3.4:1 (WCAG לרכיבי ממשק ≥3) · שגיאה 6.3:1.
	   הזהב הבהיר נשאר רק לרקעים (כפתור, סימון) — כטקסט על לבן הוא 1.9:1. */
	--rsf-card: var(--e-global-color-rs_light, #FBFAF7);
	--rsf-text: var(--e-global-color-text, #17181C);
	--rsf-text-soft: var(--e-global-color-rs_ink_soft, #4D4943);
	--rsf-accent-text: var(--e-global-color-secondary, #8A5A1C);
	--rsf-line: #D8D2C6;
	--rsf-line-strong: #8F887C;
	--rsf-error: #B3261E;
	/* שדות בהירים על הרקע הכהה — בקשת דניאל 21.10, "שיהיה בולט לעין איפה ממלאים".
	   לבן חם ולא #fff (RULES §5). נמדד: דיו 17:1 · placeholder 5.4:1 · מסגרת שגיאה 6.3:1 */
	--rsf-field-bg: #FDFDFC;
	--rsf-field-ink: var(--e-global-color-text, #17181C);
	--rsf-field-hint: #6B6760;
	--rsf-field-error: #B3261E;
	/* צל לשדה — בקשת דניאל 21.10, "שיהיה ממש מובן איפה ממלאים".
	   חיצוני: מרים את השדה מהרקע הכהה (על נייבי צל של 10% לא נראה — לכן 35%; blur = y×2, RULES §8).
	   פנימי: עומק קטן בראש השדה — הסימן המוכר של "כאן מקלידים". */
	/* על רקע בהיר צל עדין מספיק (RULES §8: blur ≤ y×3, אטימות <10%) */
	--rsf-field-shadow: 0 0.104vw 0.208vw rgba(23, 24, 28, .08), inset 0 2px 3px rgba(23, 24, 28, .08);
	--rsf-head: var(--e-global-typography-rs_h3-font-family, 'Lilith'), serif;
	--rsf-body: var(--e-global-typography-rs_body-font-family, 'Polin'), sans-serif;

	--rsf-fs: max(16px, 0.938vw);       /* 18px @1920 · רצפה 16 — iOS לא מזגזג */
	--rsf-fs-small: max(16px, 0.833vw); /* 16px @1920 */
	--rsf-gap: 1.25vw;                  /* 24px @1920 */
	--rsf-field-h: max(48px, 2.917vw);  /* 56px @1920 · מטרת מגע ≥44 */

	color: var(--rsf-text);
	font-family: var(--rsf-body);
	font-size: var(--rsf-fs);
	line-height: 1.7;
	max-width: 46.875vw;                /* 900px @1920 — מידת שורה נוחה לטופס */
	background: var(--rsf-card);
	padding: 2.5vw;                     /* 48px @1920 */
	border-radius: 8px;
	/* צל בולט — בקשת הלקוחה 21.10, "שיהיה ממש הצללה שיהיה בולט".
	   על נייבי צל חלש לא נראה בכלל, לכן שתי שכבות חזקות: קרובה (מגע) ורחוקה (ריחוף). */
	box-shadow: 0 0.208vw 0.417vw rgba(0, 0, 0, .35), 0 1.25vw 3.333vw rgba(0, 0, 0, .55);
}

.rsf *,
.rsf *::before,
.rsf *::after { box-sizing: border-box; }

.rsf [hidden] { display: none !important; }

/* ── התקדמות ───────────────────────────────────── */
.rsf__progress {
	display: flex;
	gap: 0.833vw;                       /* 16px */
	list-style: none;
	margin: 0 0 2.083vw;                /* 40px */
	padding: 0;
	counter-reset: none;
}
.rsf__progress li {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.625vw;                       /* 12px */
	padding-block-start: 0.625vw;
	border-block-start: 3px solid var(--rsf-line);
	color: var(--rsf-text-soft);
	font-size: var(--rsf-fs-small);
	transition: border-color .18s ease-out, color .18s ease-out;
}
.rsf__progress li.is-current,
.rsf__progress li.is-done {
	border-color: var(--rsf-accent-text);
	color: var(--rsf-text);
	font-weight: 700;
}
.rsf__num {
	font-family: var(--rsf-head);
	font-weight: 700;
	color: var(--rsf-accent-text);
}

/* ── שלבים ─────────────────────────────────────── */
.rsf__form { margin: 0; }
.rsf__step {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.rsf__legend {
	font-family: var(--rsf-head);
	font-weight: 700;
	font-size: max(24px, 1.823vw);      /* 35px @1920 */
	line-height: 1.2;
	color: var(--rsf-text);
	margin: 0 0 0.625vw;
	padding: 0;
}
.rsf__why-note { font-weight: 700; color: var(--rsf-text); }
.rsf__why {
	color: var(--rsf-text);
	margin: 0 0 1.667vw;                /* 32px */
	max-width: 36em;
}

.rsf__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--rsf-gap);
}
.rsf__field { margin-block-end: var(--rsf-gap); }
.rsf__field--narrow { max-width: 50%; }

.rsf label,
.rsf__label {
	display: block;
	font-weight: 700;
	margin: 0 0 0.417vw;                /* 8px */
	color: var(--rsf-text);
	font-size: var(--rsf-fs);
}
.rsf__optional {
	font-weight: 700;
	color: var(--rsf-accent-text);
	margin-inline-start: 0.417vw;
}

.rsf input[type="text"],
.rsf input[type="tel"],
.rsf textarea {
	width: 100%;
	min-height: var(--rsf-field-h);
	padding: 0 0.833vw;
	padding-inline: max(14px, 0.833vw);
	background: var(--rsf-field-bg);
	border: 1px solid var(--rsf-line-strong);
	border-radius: 4px;
	color: var(--rsf-field-ink);
	box-shadow: var(--rsf-field-shadow);
	font: inherit;
	font-size: var(--rsf-fs);
	letter-spacing: 0;
	text-align: start;
	transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
.rsf input[type="tel"] { text-align: right; } /* dir=ltr לספרות, אבל מיושר לקו של שאר השדות */
.rsf textarea {
	min-height: 5.5em;
	padding-block: max(10px, 0.625vw);
	resize: vertical;
	line-height: 1.65;
}
.rsf input::placeholder,
.rsf textarea::placeholder { color: var(--rsf-field-hint); opacity: 1; }

.rsf input[type="text"]:hover,
.rsf input[type="tel"]:hover,
.rsf textarea:hover { border-color: var(--rsf-text); }
.rsf input:focus-visible,
.rsf textarea:focus-visible,
.rsf__btn:focus-visible,
.rsf__link:focus-visible,
.rsf__drop:focus-within {
	outline: 2px solid var(--rsf-accent-text);
	outline-offset: 2px;
	border-color: var(--rsf-accent-text);
}
/* מסגרת אדומה כהה + צל פנימי — 2px בלי להזיז את הפריסה */
.rsf .is-invalid input,
.rsf .is-invalid textarea {
	border-color: var(--rsf-field-error);
	box-shadow: var(--rsf-field-shadow), inset 0 0 0 1px var(--rsf-field-error);
}

.rsf__help {
	margin: 0.417vw 0 0;
	color: var(--rsf-text-soft);
	font-size: var(--rsf-fs-small);
}
.rsf__error {
	margin: 0.417vw 0 0;
	color: var(--rsf-error);
	font-size: var(--rsf-fs-small);
	min-height: 0;
}
.rsf__error:empty { display: none; }
.rsf__error--form { margin-block-start: var(--rsf-gap); }

/* ── קטגוריות ──────────────────────────────────── */
.rsf__cats-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.833vw;
	flex-wrap: wrap;
}
.rsf__counter {
	margin: 0;
	font-weight: 700;
	color: var(--rsf-accent-text);
	font-size: var(--rsf-fs-small);
}
.rsf__cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.625vw;                       /* 12px */
	margin-block-start: 0.625vw;
}
.rsf label.rsf__chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.625vw;
	min-height: var(--rsf-field-h);
	margin: 0;
	padding: 0.521vw 0.833vw;
	padding-inline: max(12px, 0.833vw);
	border: 1px solid var(--rsf-line-strong);
	border-radius: 4px;
	background: var(--rsf-field-bg);
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color .18s ease-out, background-color .18s ease-out;
}
/* הצ'קבוקס האמיתי, מעוצב — לא מוסתר. מקלדת, קורא מסך ו-required ממשיכים לעבוד (ELEMENTOR.md §8) */
.rsf__chip input {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--rsf-line-strong);
	border-radius: 50%;
	background: transparent;
	display: grid;
	place-content: center;
	cursor: pointer;
}
.rsf__chip input::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--rsf-accent-text);
	transform: scale(0);
	transition: transform .15s ease-out;
}
.rsf__chip input:checked::before { transform: scale(1); }
.rsf__chip:hover { border-color: var(--rsf-text); }
.rsf__chip:has(input:checked) {
	border-color: var(--rsf-accent-text);
	box-shadow: inset 0 0 0 1px var(--rsf-accent-text);
	background: rgba(226, 178, 99, .18);
}
.rsf__chip:has(input:focus-visible) { outline: 2px solid var(--rsf-accent-text); outline-offset: 2px; }
.rsf__chip:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.rsf__chip input:disabled { cursor: not-allowed; }

.rsf__notes { margin-block-start: var(--rsf-gap); }
.rsf__notes .rsf__field label { font-weight: 400; color: var(--rsf-text-soft); }
.rsf__notes .rsf__field label strong { color: var(--rsf-text); font-weight: 700; }

/* ── תמונה ─────────────────────────────────────── */
.rsf__upload { margin-block-start: 0.833vw; }
.rsf__file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.rsf label.rsf__drop {
	display: flex;
	align-items: center;
	gap: 0.833vw;
	min-height: var(--rsf-field-h);
	margin: 0;
	padding: 0.625vw 0.833vw;
	padding-inline: max(14px, 0.833vw);
	border: 1px dashed var(--rsf-line-strong);
	border-radius: 4px;
	background: var(--rsf-field-bg);
	font-weight: 700;
	color: var(--rsf-text);
	cursor: pointer;
	transition: border-color .18s ease-out;
}
.rsf__drop:hover { border-color: var(--rsf-text); }
.rsf__preview {
	width: max(56px, 3.333vw);
	height: max(56px, 3.333vw);
	object-fit: cover;
	border-radius: 2px;
	margin-inline-start: auto;
}
.rsf__link {
	background: none;
	border: 0;
	padding: 0;
	margin-block-start: 0.417vw;
	min-height: 44px;
	color: var(--rsf-accent-text);
	font: inherit;
	font-size: var(--rsf-fs-small);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ── סיכום ─────────────────────────────────────── */
.rsf__summary {
	margin: 0 0 var(--rsf-gap);
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: 1.667vw;
	row-gap: 0.625vw;
}
.rsf__summary dt { color: var(--rsf-text-soft); }
.rsf__summary dd { margin: 0; font-weight: 700; }
.rsf__summary ul { margin: 0; padding-inline-start: 1.1em; }
.rsf__summary .rsf__note-line { color: var(--rsf-text-soft); font-weight: 400; font-size: var(--rsf-fs-small); }
.rsf__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-block: 1.042vw;
	border-block: 1px solid var(--rsf-line);
	margin-block-end: var(--rsf-gap);
}
.rsf__total strong {
	font-family: var(--rsf-head);
	font-size: max(28px, 1.823vw);
	color: var(--rsf-accent-text);
	font-weight: 700;
}
.rsf label.rsf__consent {
	display: flex;
	gap: 0.625vw;
	align-items: flex-start;
	font-weight: 400;
	min-height: 44px;
}
.rsf__consent input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0.25em 0 0;
	accent-color: var(--rsf-accent-text);
}
.rsf__consent a { color: var(--rsf-accent-text); text-underline-offset: 3px; }
.rsf__secure {
	margin: 0.833vw 0 0;
	color: var(--rsf-text-soft);
	font-size: var(--rsf-fs-small);
}

/* ── כפתורים ───────────────────────────────────── */
.rsf__nav {
	display: flex;
	gap: 0.833vw;
	justify-content: flex-start;
	margin-block-start: 1.667vw;
}
.rsf__btn {
	min-height: max(48px, 2.917vw);
	padding: 0 max(28px, 2.083vw);
	border-radius: 999px;
	font-family: var(--rsf-body);
	font-weight: 700;
	font-size: var(--rsf-fs);
	letter-spacing: 0;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out;
}
.rsf__btn--primary {
	background: var(--rsf-gold);
	color: var(--rsf-navy);
	border: 1px solid var(--rsf-gold);
}
/* .rsf לפני הכפתור — הספציפיות גוברת על reset של Hello
   ([type=button]:hover / button:focus → רקע #c36 וטקסט לבן), שהפך את הכיתוב ללבן-על-לבן בהובר */
.rsf .rsf__btn--primary:hover,
.rsf .rsf__btn--primary:focus {
	background: var(--rsf-navy);
	border-color: var(--rsf-navy);
	color: var(--rsf-gold);
	text-decoration: none;
}
.rsf__btn--ghost {
	background: transparent;
	color: var(--rsf-text);
	border: 1px solid var(--rsf-line-strong);
}
.rsf .rsf__btn--ghost:hover,
.rsf .rsf__btn--ghost:focus {
	background: transparent;
	border-color: var(--rsf-text);
	color: var(--rsf-text);
	text-decoration: none;
}
/* בלי ה-hover, focus נשאר אחרי לחיצה — מחזירים את מצב המנוחה */
.rsf .rsf__btn--primary:focus:not(:hover) {
	background: var(--rsf-gold);
	border-color: var(--rsf-gold);
	color: var(--rsf-navy);
}
.rsf__btn[disabled] { opacity: .6; cursor: progress; }

/* ── תוצאה ─────────────────────────────────────── */
.rsf__result {
	padding: 2.083vw;
	border: 1px solid var(--rsf-line);
	border-radius: 4px;
	outline: none;
}
.rsf__result-title {
	font-family: var(--rsf-head);
	font-weight: 700;
	font-size: max(24px, 1.823vw);
	line-height: 1.2;
	margin: 0 0 0.625vw;
}
.rsf__result p { margin: 0 0 0.625vw; }
.rsf__order-key { color: var(--rsf-accent-text); font-weight: 700; }
.rsf__pick strong { color: var(--rsf-text); }
.rsf__amount-label { color: var(--rsf-text-soft); margin-block-end: 0 !important; }
.rsf__amount {
	font-family: var(--rsf-head);
	font-weight: 700;
	font-size: max(40px, 3.333vw);      /* 64px @1920 — המספר שהלקוח מקליד, חייב להיקרא ממטר */
	line-height: 1.1;
	color: var(--rsf-accent-text);
	margin-block-end: 1.042vw !important;
}
/* קישור-כפתור: צבע הקישורים של הקיט (.elementor-kit-6 a → זהב עמוק) גבר על צבע הכפתור
   והכיתוב יצא חום על זהב. a.rsf__btn בתוך .rsf — ספציפיות 0,2,1, גוברת על הקיט */
.rsf a.rsf__btn--primary,
.rsf a.rsf__btn--primary:visited { color: var(--rsf-navy); }
.rsf a.rsf__btn--primary:hover { color: var(--rsf-gold); }
.rsf a.rsf__btn--primary:focus:not(:hover) { color: var(--rsf-navy); }
.rsf__btn--link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	margin-block-start: 0.833vw;
}

/* הסתרה בלי היסט — left:-9999px ב-RTL יצר גלילה אופקית של 9,980px במובייל (נמדד 18.10) */
.rsf__hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── מובייל — ייחוס 390 ────────────────────────── */
@media (max-width: 767px) {
	.rsf {
		--rsf-gap: 5.128vw;              /* 20px @390 */
		--rsf-fs: max(16px, 4.359vw);    /* 17px @390 */
		--rsf-fs-small: max(16px, 4.103vw);
		--rsf-field-h: max(48px, 12.308vw);
		--rsf-field-shadow: 0 1px 2px rgba(23, 24, 28, .08), inset 0 2px 3px rgba(23, 24, 28, .08);
		max-width: none;
		padding: 6.154vw 5.128vw;        /* 24px / 20px @390 */
		box-shadow: 0 1.026vw 2.051vw rgba(0, 0, 0, .35), 0 4.103vw 10.256vw rgba(0, 0, 0, .55); /* 4/8 · 16/40px @390 */
	}
	.rsf__progress { gap: 2.051vw; margin-block-end: 7.179vw; }
	.rsf__progress li { padding-block-start: 2.051vw; gap: 2.051vw; }
	/* במובייל רק המספרים — שלוש תוויות לא נכנסות בשורה ב-375 */
	.rsf__dot-label { display: none; }
	.rsf__progress li.is-current .rsf__dot-label { display: inline; }
	.rsf__legend { font-size: max(22px, 6.154vw); margin-block-end: 2.051vw; }
	.rsf__why { margin-block-end: 6.154vw; }
	.rsf__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.rsf__field--narrow { max-width: none; }
	.rsf label,
	.rsf__label { margin-block-end: 2.051vw; }
	.rsf__cats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.051vw; margin-block-start: 2.051vw; }
	.rsf label.rsf__chip { padding: 2.564vw 3.077vw; gap: 2.051vw; }
	.rsf__nav { margin-block-start: 6.154vw; gap: 3.077vw; }
	.rsf__nav .rsf__btn { flex: 1; }
	.rsf__nav .rsf__btn--ghost { flex: 0 0 auto; }
	.rsf__summary { grid-template-columns: minmax(0, 1fr); row-gap: 1.026vw; }
	.rsf__summary dd { margin-block-end: 2.051vw; }
	.rsf__total { padding-block: 4.103vw; }
	.rsf__result { padding: 6.154vw 5.128vw; }
	.rsf__amount { font-size: max(40px, 11.282vw); margin-block-end: 3.077vw !important; }
	.rsf__btn--link { display: flex; width: 100%; margin-block-start: 3.077vw; }
	.rsf__secure { margin-block-start: 3.077vw; }
}

@media (prefers-reduced-motion: reduce) {
	.rsf * { transition: none !important; }
}