/* SHAPE Reviews — טופס שאלה-אחרי-שאלה */

.sr-form {
	--sr-accent: #D82466;
	--sr-star: #FFB400;
	--sr-text: #151A2D;
	--sr-muted: #6B7683;
	--sr-surface: #FFF;
	--sr-bg: #F6F7F9;
	--sr-border: #E4E8EC;
	--sr-radius: 16px;
	--sr-radius-sm: 8px;
	--sr-font: 'Assistant', system-ui, sans-serif;

	position: relative;
	box-sizing: border-box;
	max-width: 720px;
	margin-inline: auto;
	padding: 0;
	font-family: var(--sr-font);
	color: var(--sr-text);
	direction: rtl;
}

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

/* כללי display שלנו גוברים על hidden של הדפדפן — מחזירים לו את הכוח */
.sr-form [hidden],
.shape-reviews [hidden] {
	display: none !important;
}

/* --- סרגל התקדמות --- */

.sr-form__progress {
	position: sticky;
	top: 0;
	z-index: 3;
	height: 3px;
	background-color: var(--sr-border);
	border-radius: 99px;
	overflow: hidden;
}

.sr-form__progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background-color: var(--sr-accent);
	border-radius: 99px;
	transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

/* --- הבמה --- */

.sr-form__stage {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 62vh;
	padding-block: clamp(28px, 6vw, 64px);
}

.sr-step {
	display: block;
	width: 100%;
	animation: sr-step-in .42s cubic-bezier(.22, .61, .36, 1) both;
}

.sr-step.is-leaving {
	animation: sr-step-out .22s ease forwards;
}

@keyframes sr-step-in {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@keyframes sr-step-out {
	from { opacity: 1; transform: none; }
	to   { opacity: 0; transform: translateY(-14px); }
}

.sr-step__counter {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--sr-accent);
}

.sr-step__counter span {
	color: var(--sr-muted);
	font-weight: 400;
}

.sr-step__question {
	display: block;
	width: 100%;
	clear: both;
	margin: 0 0 10px;
	font-size: clamp(21px, 3.4vw, 32px);
	line-height: 1.28;
	font-weight: 600;
	letter-spacing: -.01em;
}

.sr-step__required {
	color: var(--sr-accent);
	margin-inline-start: 4px;
}

.sr-step__help {
	display: block;
	width: 100%;
	clear: both;
	margin: 0 0 26px;
	font-size: 15px;
	color: var(--sr-muted);
}

.sr-step__field {
	margin-bottom: 22px;
}

/* --- שדות טקסט --- */

.sr-input,
.sr-textarea {
	width: 100%;
	padding: 10px 2px;
	font-family: inherit;
	font-size: clamp(17px, 2.2vw, 21px);
	color: var(--sr-text);
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid var(--sr-border);
	border-radius: 0;
	outline: none;
	transition: border-color .2s ease;
	appearance: none;
}

.sr-input::placeholder,
.sr-textarea::placeholder {
	color: var(--sr-muted);
	color: color-mix(in srgb, var(--sr-muted) 55%, transparent);
}

.sr-input:focus,
.sr-textarea:focus {
	border-bottom-color: var(--sr-accent);
}

.sr-textarea {
	min-height: 120px;
	line-height: 1.6;
	resize: vertical;
}

.sr-count {
	margin-top: 6px;
	font-size: 12px;
	color: var(--sr-muted);
	text-align: start;
}

/* --- דירוג כוכבים --- */

.sr-rate {
	display: flex;
	gap: 8px;
	margin-block: 4px 6px;
}

.sr-rate__btn {
	display: grid;
	place-items: center;
	width: clamp(46px, 11vw, 58px);
	height: clamp(46px, 11vw, 58px);
	padding: 0 !important;
	margin: 0 !important;
	background-image: none !important; background-color: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--sr-border);
	cursor: pointer;
	transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), color .16s ease;
}

.sr-rate__btn svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.sr-rate__btn:hover {
	transform: translateY(-2px) scale(1.05);
	background-image: none !important; background-color: transparent !important;
	background-color: transparent !important;
}

.sr-rate__btn:focus-visible {
	outline: 2px solid var(--sr-accent);
	outline-offset: 2px;
}

.sr-rate__btn.is-on {
	color: var(--sr-star);
}

.sr-rate__btn.is-pop {
	animation: sr-pop .32s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes sr-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.28) rotate(-6deg); }
	100% { transform: scale(1); }
}

.sr-rate__label {
	min-height: 22px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sr-accent);
}

/* --- בחירה מרשימה --- */

.sr-choices {
	display: grid;
	gap: 10px;
}

.sr-choice {
	display: flex;
	box-shadow: none !important;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 17px;
	text-align: start;
	color: var(--sr-text);
	background-color: var(--sr-surface);
	border: 1.5px solid var(--sr-border);
	border-radius: var(--sr-radius-sm);
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.sr-choice:hover {
	border-color: var(--sr-accent);
	transform: translateX(-3px);
}

.sr-choice.is-on {
	border-color: var(--sr-accent);
	background-color: var(--sr-bg);
	background: color-mix(in srgb, var(--sr-accent) 7%, transparent);
}

.sr-choice__key {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	font-size: 13px;
	font-weight: 700;
	color: var(--sr-muted);
	background-color: var(--sr-bg);
	border-radius: 6px;
}

.sr-choice.is-on .sr-choice__key {
	color: #FFF;
	background-color: var(--sr-accent);
}

/* --- הסכמה --- */

.sr-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	background-color: var(--sr-bg);
	border-radius: var(--sr-radius-sm);
	cursor: pointer;
	font-size: 16px;
	line-height: 1.5;
}

.sr-consent input {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--sr-accent);
	flex: 0 0 20px;
}

/* --- ניווט --- */

.sr-nav {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.sr-btn {
	display: inline-flex;
	box-shadow: none !important;
	text-decoration: none !important;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: #FFF;
	background-color: var(--sr-accent);
	border: 0;
	border-radius: var(--sr-radius-sm);
	cursor: pointer;
	transition: filter .18s ease, transform .18s ease;
}

.sr-btn:hover { filter: brightness(1.08); }
.sr-btn:active { transform: translateY(1px); }
.sr-btn[disabled] { opacity: .55; cursor: default; }

.sr-btn--ghost {
	color: var(--sr-text);
	background-color: transparent;
	border: 1.5px solid var(--sr-border);
}

.sr-btn--link {
	padding: 12px 6px;
	font-weight: 500;
	color: var(--sr-muted);
	background: none;
}

.sr-btn--link:hover { color: var(--sr-text); filter: none; }

.sr-hint {
	font-size: 13px;
	color: var(--sr-muted);
}

.sr-hint kbd {
	padding: 2px 6px;
	font-family: inherit;
	font-size: 12px;
	background-color: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: 4px;
}

.sr-error {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: #C62828;
}

/* --- פתיחה וסיום --- */

.sr-intro__title,
.sr-done__title {
	margin: 0 0 12px;
	font-size: clamp(26px, 4.4vw, 40px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.sr-intro__text,
.sr-done__text {
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--sr-muted);
}

.sr-done__mark {
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	margin-bottom: 22px;
	color: #FFF;
	background-color: var(--sr-accent);
	border-radius: 50%;
	animation: sr-pop .5s cubic-bezier(.34, 1.56, .64, 1);
}

.sr-done__mark svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.5; }

.sr-form--closed {
	padding: 40px 24px;
	text-align: center;
	color: var(--sr-muted);
	background-color: var(--sr-bg);
	border-radius: var(--sr-radius);
}

.sr-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.sr-step,
	.sr-step.is-leaving,
	.sr-rate__btn.is-pop,
	.sr-done__mark {
		animation: none;
	}

	.sr-form__progress-bar,
	.sr-choice,
	.sr-rate__btn {
		transition: none;
	}
}

/* --- העלאת תמונות --- */

.sr-photos { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

.sr-photos__strip { display: flex; gap: 10px; flex-wrap: wrap; }

.sr-photos__item {
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: var(--sr-radius-sm);
	overflow: hidden;
	background-color: var(--sr-bg);
}

.sr-photos__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sr-photos__remove {
	position: absolute;
	top: 4px;
	inset-inline-end: 4px;
	width: 22px;
	height: 22px;
	font-size: 12px;
	line-height: 1;
	color: #FFF;
	background: rgba(10, 12, 20, .6) !important;
	border: 0 !important;
	border-radius: 50%;
	cursor: pointer;
	padding: 0 !important;
}

.sr-photos__add {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sr-accent);
	background-color: transparent;
	border: 1.5px dashed var(--sr-border);
	border-radius: var(--sr-radius-sm);
	cursor: pointer;
}

.sr-photos__add:hover { border-color: var(--sr-accent); }

.sr-photos__input {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* --- מצב קלאסי: טופס אחד קומפקטי --- */

.sr-form--classic { max-width: 620px; }

.sr-form--classic .sr-form__stage {
	display: block;
	min-height: 0;
	padding-block: 0;
}

.sr-classic {
	padding: 28px;
	background-color: var(--sr-surface);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius);
}

.sr-classic__title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.sr-classic__text {
	margin: 0 0 22px;
	font-size: 15px;
	color: var(--sr-muted);
}

.sr-cf { margin-bottom: 20px; }

.sr-cf__label {
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sr-text);
}

.sr-cf__help {
	margin: 0 0 8px;
	font-size: 13px;
	color: var(--sr-muted);
}

.sr-cf__error {
	min-height: 0;
	margin-top: 5px;
	font-size: 13px;
	font-weight: 600;
	color: #C62828;
}

.sr-cf.has-error .sr-input,
.sr-cf.has-error .sr-textarea { border-bottom-color: #C62828; }

.sr-cf.has-error .sr-choice,
.sr-cf.has-error .sr-consent,
.sr-cf.has-error .sr-photos__add { border-color: #C62828; }

/* בטופס הקלאסי השדות ממוסגרים ולא רק קו תחתון */
.sr-form--classic .sr-input,
.sr-form--classic .sr-textarea {
	padding: 11px 14px;
	font-size: 16px;
	background-color: var(--sr-surface);
	border: 1.5px solid var(--sr-border);
	border-radius: var(--sr-radius-sm);
}

.sr-form--classic .sr-input:focus,
.sr-form--classic .sr-textarea:focus {
	border-color: var(--sr-accent);
}

.sr-form--classic .sr-textarea { min-height: 108px; }

.sr-form--classic .sr-rate { margin-block: 0 2px; }

.sr-form--classic .sr-rate__btn {
	width: clamp(34px, 8vw, 40px);
	height: clamp(34px, 8vw, 40px);
}

.sr-form--classic .sr-rate__label { min-height: 18px; font-size: 13px; }

.sr-form--classic .sr-cf--rating { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sr-form--classic .sr-cf--rating .sr-cf__label { margin: 0; }
.sr-form--classic .sr-cf--rating .sr-cf__error { flex: 1 0 100%; }

.sr-form--classic .sr-photos__add { padding: 10px 18px; font-size: 14px; }
.sr-form--classic .sr-photos__item { width: 76px; height: 76px; }

.sr-form--classic .sr-nav { margin-top: 24px; }
.sr-form--classic .sr-btn { width: 100%; justify-content: center; }

.sr-form--classic .sr-done,
.sr-form--classic .sr-step {
	padding: 28px;
	background-color: var(--sr-surface);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius);
}

/* --- שיוך למוצר --- */

.sr-product-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	padding: 9px 15px;
	font-size: 14px;
	background-color: var(--sr-bg);
	border: 1px solid var(--sr-border);
	border-radius: 99px;
}

.sr-product-chip__label { color: var(--sr-muted); font-size: 13px; }

/* ==========================================================================
   מיתוג הטופס
   ========================================================================== */

.sr-form.is-boxed {
	padding: clamp(22px, 4vw, 40px);
	background-color: var(--sr-surface);
	border: 1px solid var(--sr-border);
	border-radius: calc(var(--sr-radius) + 4px);
	box-shadow: 0 14px 44px -28px rgba(16, 20, 35, .3);
}

.sr-form.is-boxed .sr-form__stage { min-height: 54vh; }
.sr-form.is-boxed.sr-form--classic .sr-classic { padding: 0; background: none; border: 0; }

/* --- הדר --- */

.sr-brandbar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-bottom: 22px;
	margin-bottom: 22px;
	text-align: center;
	border-bottom: 1px solid var(--sr-border);
}

.sr-brandbar__logo { display: block; line-height: 0; }

.sr-brandbar__logo img {
	width: var(--sr-logo-w, 160px);
	max-width: 70vw;
	height: auto;
	display: block;
}

.sr-brandbar__name {
	font-size: clamp(19px, 3vw, 24px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--sr-text);
}

.sr-brandbar__tagline {
	max-width: 460px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--sr-muted);
}

/* --- פוטר --- */

.sr-brandfoot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--sr-border);
}

.sr-brandfoot__social { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.sr-social {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: var(--sr-muted) !important;
	background-color: var(--sr-bg) !important;
	border: 1px solid var(--sr-border) !important;
	border-radius: 50%;
	text-decoration: none !important;
	transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.sr-social svg { width: 19px; height: 19px; }

.sr-social:hover {
	transform: translateY(-2px);
	color: var(--sr-social, var(--sr-accent)) !important;
	border-color: var(--sr-social, var(--sr-accent)) !important;
}

.sr-brandfoot__note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--sr-muted);
	text-align: center;
	max-width: 460px;
}

@media (max-width: 600px) {
	.sr-social { width: 36px; height: 36px; }
	.sr-social svg { width: 17px; height: 17px; }
}

.sr-done__redirect {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--sr-muted);
}

/* ==========================================================================
   מובייל
   ========================================================================== */

/* iOS מזמזם על שדה עם גופן קטן מ-16px. זה הכלל שמונע את זה. */
@media (max-width: 782px) {
	.sr-form input,
	.sr-form textarea,
	.sr-form select {
		font-size: 16px !important;
	}
}

@media (max-width: 640px) {

	.sr-form {
		max-width: 100%;
	}

	.sr-form.is-boxed {
		padding: 20px 16px;
		border-radius: var(--sr-radius);
	}

	/* גובה בטוח: svh מתחשב בסרגל הכתובת של הדפדפן, vh לא */
	.sr-form__stage,
	.sr-form.is-boxed .sr-form__stage {
		min-height: 52svh;
		padding-block: 18px;
	}

	.sr-step__question { font-size: 21px; line-height: 1.3; }
	.sr-step__help { margin-bottom: 20px; font-size: 14px; }
	.sr-step__counter { margin-bottom: 10px; font-size: 12px; }

	/* כוכבים: מתפרסים על כל הרוחב, יעד נגיעה מלא */
	.sr-rate {
		gap: 4px;
		justify-content: space-between;
		max-width: 320px;
	}

	.sr-rate__btn {
		width: 17vw;
		height: 17vw;
		max-width: 56px;
		max-height: 56px;
		touch-action: manipulation;
	}

	.sr-rate__btn:hover { transform: none; }

	/* בחירות: יעד נגיעה של 48px לפחות */
	.sr-choice {
		padding: 15px 16px;
		font-size: 16px;
		touch-action: manipulation;
	}

	.sr-choice:hover { transform: none; }

	.sr-textarea { min-height: 132px; }

	/* ניווט דביק בתחתית — הכפתור תמיד בהישג אגודל */
	.sr-form--steps .sr-nav {
		position: sticky;
		bottom: 0;
		z-index: 4;
		gap: 10px;
		margin-inline: -16px;
		margin-bottom: -4px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: linear-gradient(to top, var(--sr-surface) 78%, transparent);
	}

	.sr-form--steps .sr-btn {
		flex: 1;
		justify-content: center;
		min-height: 50px;
		font-size: 17px;
		touch-action: manipulation;
	}

	.sr-form--steps .sr-btn--link {
		flex: 0 0 auto;
		min-height: 50px;
		padding-inline: 14px;
	}

	.sr-hint { display: none; }

	/* מיתוג */
	.sr-brandbar { padding-bottom: 16px; margin-bottom: 16px; gap: 8px; }
	.sr-brandbar__tagline { font-size: 13.5px; }
	.sr-brandfoot { margin-top: 20px; padding-top: 18px; gap: 12px; }

	/* תמונות */
	.sr-photos__item { width: 78px; height: 78px; }
	.sr-photos__add { width: 100%; justify-content: center; min-height: 50px; }

	/* טופס קלאסי */
	.sr-form--classic .sr-classic { padding: 20px 16px; }
	.sr-classic__title { font-size: 20px; }
	.sr-cf { margin-bottom: 18px; }
	.sr-form--classic .sr-rate__btn { width: 15vw; height: 15vw; max-width: 46px; max-height: 46px; }
	.sr-form--classic .sr-btn { min-height: 52px; font-size: 17px; }

	.sr-consent { padding: 14px; font-size: 15px; }
	.sr-consent input { width: 22px; height: 22px; flex: 0 0 22px; }

	.sr-done__mark { width: 58px; height: 58px; margin-bottom: 18px; }
	.sr-intro__title, .sr-done__title { font-size: 24px; }
	.sr-intro__text, .sr-done__text { font-size: 15.5px; }
	.sr-product-chip { font-size: 13px; margin-bottom: 16px; }
}

/* מסכים צרים מאוד */
@media (max-width: 360px) {
	.sr-form.is-boxed { padding: 16px 12px; }
	.sr-step__question { font-size: 19px; }
	.sr-rate__btn { width: 16vw; height: 16vw; }
}

/* מכשירי מגע בכלל — ביטול אפקטי ריחוף שנתקעים אחרי נגיעה */
@media (hover: none) {
	.sr-rate__btn:hover,
	.sr-choice:hover,
	.sr-social:hover,
	.sr-photos__item:hover {
		transform: none;
	}
}

/* --- הצעה לפרסם גם בגוגל --- */

.sr-gcta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 420px;
	margin: 26px auto 0;
	padding: 24px 22px;
	text-align: center;
	background-color: var(--sr-surface);
	border: 1px solid var(--sr-border);
	border-radius: var(--sr-radius);
	box-shadow: 0 2px 12px -8px rgba(16, 20, 35, .3);
}

.sr-gcta__logo { line-height: 0; margin-bottom: 2px; }

.sr-gcta__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--sr-text);
}

.sr-gcta__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--sr-muted);
}

.sr-gcta__note {
	margin: 0;
	min-height: 18px;
	font-size: 12.5px;
	font-weight: 600;
	color: transparent;
	transition: color .2s ease;
}

.sr-gcta__note.is-copied { color: #0F9D58; }

.sr-gcta__btn {
	display: inline-block;
	margin-top: 6px;
	padding: 13px 30px;
	font-size: 15px;
	font-weight: 700;
	color: #FFFFFF !important;
	background-color: #1A73E8;
	border-radius: 99px;
	text-decoration: none !important;
	transition: background-color .18s ease, transform .18s ease;
}

.sr-gcta__btn:hover { background-color: #1558B0; transform: translateY(-1px); }

@media (max-width: 640px) {
	.sr-gcta { padding: 20px 16px; margin-top: 20px; }
	.sr-gcta__btn { width: 100%; min-height: 50px; line-height: 26px; }
}