/**
 * Guide IL lead form.
 *
 * Every value here is measured from the live guide-il.com landing pages rather
 * than invented, so the new form is indistinguishable from the widget it
 * replaces: the indigo card, the gradient choice rows with their circular arrow,
 * the Assistant type, the soft coloured shadow.
 *
 * Mobile-first — 76% of real leads arrive on a phone, and iOS is the majority.
 */

.glc-form {
	/* --- measured from production --- */
	--glc-card: #5759e1;
	--glc-card-shadow: rgba(87, 89, 225, 0.32);
	--glc-choice-from: #433dce;
	--glc-choice-to: #312bae;
	--glc-choice-shadow: rgba(3, 23, 33, 0.22);
	--glc-hairline: rgba(255, 255, 255, 0.22);
	--glc-ink: #031721;
	--glc-on-card: #ffffff;
	--glc-muted: rgba(255, 255, 255, 0.88);
	--glc-warn: #ffe9ec;

	--glc-radius-card: 32px;
	--glc-radius-row: 20px;
	--glc-radius-field: 16px;

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 482px;
	margin-inline: auto;
	padding: 26px;
	border: 1px solid var(--glc-hairline);
	border-radius: var(--glc-radius-card);
	background: var(--glc-card);
	box-shadow: 0 30px 80px 0 var(--glc-card-shadow);
	color: var(--glc-on-card);
	font-family: Assistant, system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: right;
}

.glc-form *,
.glc-form *::before,
.glc-form *::after {
	box-sizing: inherit;
}

/* Themes commonly set `display` on button/div, which outranks the user-agent
   rule for [hidden] and leaves the back button visible on step one. */
.glc-form [hidden] {
	display: none !important;
}

/* ---------- header ---------- */

.glc-form__eyebrow {
	margin: 0 0 2px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--glc-muted);
}

.glc-form__title {
	margin: 0 0 16px;
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--glc-on-card);
}

.glc-progress {
	height: 5px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	overflow: hidden;
}

.glc-progress__bar {
	width: 0;
	height: 100%;
	border-radius: 999px;
	background: #fff;
	transition: width 0.3s ease;
}

.glc-form__counter {
	margin: 8px 0 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--glc-muted);
}

/* ---------- question ---------- */

.glc-form__body {
	margin: 18px 0 0;
}

.glc-step__label {
	display: block;
	margin: 0 0 14px;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--glc-on-card);
}

/* ---------- choices ---------- */

.glc-choices {
	display: grid;
	gap: 12px;
}

.glc-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	/* 54px matches the production row and stays a comfortable thumb target. */
	min-height: 54px;
	padding: 8px 18px 8px 8px;
	border: 1px solid var(--glc-hairline);
	border-radius: var(--glc-radius-row);
	background-image: linear-gradient(105deg, var(--glc-choice-from), var(--glc-choice-to));
	box-shadow: 0 14px 28px 0 var(--glc-choice-shadow);
	color: #fff;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: right;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.glc-choice:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 34px 0 var(--glc-choice-shadow);
}

.glc-choice:active {
	transform: translateY(0);
}

.glc-choice__text {
	flex: 1;
}

/* The circular arrow is the site's signature affordance on these rows. */
.glc-choice__arrow {
	display: grid;
	place-items: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	font-size: 20px;
	line-height: 1;
}

.glc-choice.is-selected {
	border-color: #fff;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 14px 28px 0 var(--glc-choice-shadow);
}

.glc-choice.is-selected .glc-choice__arrow {
	background: #fff;
	color: var(--glc-choice-to);
}

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

.glc-input {
	width: 100%;
	min-height: 54px;
	padding: 14px 16px;
	border: 1px solid transparent;
	border-radius: var(--glc-radius-field);
	background: #fff;
	color: var(--glc-ink);
	font-family: inherit;
	/* 16px minimum, otherwise iOS Safari zooms on focus and throws the user
	   out of the layout mid-answer. */
	font-size: 16px;
	font-weight: 600;
}

.glc-input::placeholder {
	color: rgba(3, 23, 33, 0.4);
	font-weight: 500;
}

.glc-input:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	border-color: #fff;
}

select.glc-input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--glc-ink) 50%),
		linear-gradient(135deg, var(--glc-ink) 50%, transparent 50%);
	background-position: 18px calc(50% - 2px), 23px calc(50% - 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-left: 40px;
}

/* ---------- feedback ---------- */

.glc-form__notice {
	margin: 12px 0 0;
	padding: 8px 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.9rem;
	font-weight: 600;
	color: #fff;
}


.glc-form__error {
	margin: 12px 0 0;
	min-height: 1.25em;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--glc-warn);
}

.glc-form__error:empty {
	min-height: 0;
	margin-top: 0;
}

/* ---------- navigation ---------- */

.glc-form__nav {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.glc-btn {
	min-height: 54px;
	padding: 14px 22px;
	border: 1px solid transparent;
	border-radius: var(--glc-radius-row);
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 800;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* White on indigo, mirroring the site's white pill labels. */
.glc-btn--next {
	flex: 1;
	background: #fff;
	color: var(--glc-choice-to);
	box-shadow: 0 14px 28px 0 var(--glc-choice-shadow);
}

.glc-btn--next:hover {
	transform: translateY(-1px);
	box-shadow: 0 18px 34px 0 var(--glc-choice-shadow);
}

.glc-btn--back {
	flex: 0 0 auto;
	background: transparent;
	border-color: var(--glc-hairline);
	color: #fff;
}

.glc-btn--back:hover {
	background: rgba(255, 255, 255, 0.12);
}

.glc-btn:focus-visible,
.glc-choice:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* ---------- completion ---------- */

.glc-form__done {
	padding: 28px 6px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
	color: #fff;
}

/* ---------- responsive ---------- */

@media (max-width: 480px) {
	.glc-form {
		padding: 20px;
		border-radius: 26px;
	}

	.glc-choice {
		font-size: 1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.glc-progress__bar,
	.glc-choice,
	.glc-btn {
		transition: none;
	}

	.glc-choice:hover,
	.glc-btn--next:hover {
		transform: none;
	}
}

/* ---------- hosted on a light surface ---------- */

/*
 * The landing pages open the questions inside their own white modal, which
 * already supplies the panel, the close button and the progress bar. The card
 * this form normally draws would be a second card inside that one, so it steps
 * back — but only the surface goes. Text that was written for a deep purple
 * card is unreadable on white, so the tokens flip together with it rather than
 * the background being removed on its own.
 */
#lg123-form-step .glc-form {
	--glc-card: transparent;
	--glc-on-card: var(--glc-ink);
	--glc-muted: rgba(3, 23, 33, 0.62);
	--glc-hairline: rgba(3, 23, 33, 0.14);

	padding: 0;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

/*
 * The modal draws its own bar above the questions, so ours steps back. The
 * counter stays: "שלב 2 מתוך 12" tells someone how much is left in a way a
 * percentage does not.
 */
#lg123-form-step .glc-progress {
	display: none;
}

/*
 * White on white. The button reads as the primary action on the purple card,
 * and has to earn that back here.
 */
#lg123-form-step .glc-btn--next {
	background-image: linear-gradient(105deg, var(--glc-choice-from), var(--glc-choice-to));
	color: #fff;
}

/* Inputs relied on the card behind them for their edge. */
#lg123-form-step .glc-input {
	border-color: rgba(3, 23, 33, 0.18);
	background: #fff;
}

#lg123-form-step .glc-input:focus {
	border-color: var(--glc-choice-to);
	outline: none;
}

/* The back button was a hairline on purple; it needs ink to be seen. */
#lg123-form-step .glc-btn--back {
	color: var(--glc-ink);
	border-color: rgba(3, 23, 33, 0.18);
}

/* Errors were pale pink for contrast against purple. */
#lg123-form-step .glc-form__error {
	color: #b3261e;
}