/* ==========================================================================
   "תיאום פגישה" popup — Oct 2026. Opened from the header CTA.
   ========================================================================== */
.kleyman-header__cta { gap: 9px; }
.kleyman-header__cta-icon { flex: none; position: relative; }

html.kleyman-meeting-lock,
html.kleyman-meeting-lock body { overflow: hidden; }

.kleyman-meeting {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 24px;
	direction: rtl;
}
.kleyman-meeting[hidden] { display: none; }
.kleyman-meeting__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 14, 38, .62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .3s ease;
}
.kleyman-meeting__panel {
	position: relative;
	width: min(640px, 100%);
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border-radius: 26px;
	box-shadow: 0 40px 90px rgba(8, 14, 38, .35);
	padding: 44px 44px 34px;
	opacity: 0;
	transform: translateY(18px) scale(.98);
	transition: opacity .3s ease, transform .35s var(--kleyman-ease, cubic-bezier(.22,.61,.36,1));
}
/* Brand line on top of the panel (blue → green → brown, logo palette). */
.kleyman-meeting__panel::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--kleyman-blue), var(--kleyman-green), var(--kleyman-brown));
}
.kleyman-meeting.is-open .kleyman-meeting__backdrop { opacity: 1; }
.kleyman-meeting.is-open .kleyman-meeting__panel { opacity: 1; transform: none; }

.kleyman-meeting__close {
	position: absolute;
	top: 18px;
	inset-inline-end: 18px;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: #f2f4f8;
	color: var(--kleyman-dark);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.kleyman-meeting__close:hover { background: #e6eaf2; transform: rotate(90deg); }

.kleyman-meeting__head { margin-bottom: 26px; padding-inline-end: 48px; }
.kleyman-meeting__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: var(--kleyman-green);
	margin-bottom: 8px;
}
.kleyman-meeting__eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; }
.kleyman-meeting__title { margin: 0; font-size: clamp(32px, 4vw, 42px); font-weight: 350; line-height: 1.1; color: var(--kleyman-dark); }
.kleyman-meeting__title strong { font-weight: 800; }
.kleyman-meeting__lede { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--kleyman-text-muted); }

.kleyman-meeting__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 16px;
}
.kleyman-meeting__form[hidden] { display: none; }
.kleyman-meeting__field { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.kleyman-meeting__field--full { grid-column: 1 / -1; }
.kleyman-meeting__field > label,
.kleyman-meeting__field > legend { font-size: 14px; font-weight: 700; color: var(--kleyman-dark); padding: 0; margin-bottom: 7px; }
.kleyman-meeting__field input,
.kleyman-meeting__field select,
.kleyman-meeting__field textarea {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	border: 1px solid #dfe3eb;
	border-radius: 12px;
	background: #f8f9fc;
	font: inherit;
	font-size: 16px; /* ≥16px so iOS doesn't zoom on focus */
	color: var(--kleyman-dark);
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.kleyman-meeting__field textarea { height: auto; min-height: 76px; padding: 12px 14px; resize: vertical; }
.kleyman-meeting__field input[type="tel"] { text-align: right; }
.kleyman-meeting__field input:focus,
.kleyman-meeting__field select:focus,
.kleyman-meeting__field textarea:focus {
	outline: none;
	border-color: var(--kleyman-green);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(17, 121, 58, .14);
}
.kleyman-meeting__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kleyman-meeting__chip { position: relative; cursor: pointer; }
.kleyman-meeting__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kleyman-meeting__chip span {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 18px;
	border: 1px solid #dfe3eb;
	border-radius: 999px;
	background: #fff;
	font-size: 15px;
	font-weight: 600;
	color: var(--kleyman-dark);
	transition: all .2s ease;
}
.kleyman-meeting__chip:hover span { border-color: var(--kleyman-dark); }
.kleyman-meeting__chip input:checked + span { background: var(--kleyman-dark); border-color: var(--kleyman-dark); color: #fff; }
.kleyman-meeting__chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(17, 121, 58, .25); }

.kleyman-meeting__consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--kleyman-text-muted); cursor: pointer; position: relative; }
.kleyman-meeting__consent input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--kleyman-green); }
.kleyman-meeting__consent a { color: var(--kleyman-dark); text-decoration: underline; text-underline-offset: 2px; }

.kleyman-meeting__submit {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 56px;
	border: 0;
	border-radius: 999px;
	background: var(--kleyman-green);
	color: #fff;
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease, gap .2s ease, transform .2s ease;
}
.kleyman-meeting__submit:hover { background: #189138; gap: 16px; }
.kleyman-meeting__submit:disabled { opacity: .7; cursor: progress; }
.kleyman-meeting__submit--ghost { width: 100%; background: var(--kleyman-dark); margin-top: 8px; }
.kleyman-meeting__submit--ghost:hover { background: #18245a; }

.kleyman-meeting__status { grid-column: 1 / -1; margin: 0; font-size: 14px; min-height: 0; }
.kleyman-meeting__status.is-error { color: #c0392b; }
.kleyman-meeting__alt { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 14px; color: var(--kleyman-text-muted); }
.kleyman-meeting__alt a { color: var(--kleyman-dark); font-weight: 700; }

.kleyman-meeting__field.is-error input,
.kleyman-meeting__field.is-error select { border-color: #d64545; background: #fff7f7; }
.kleyman-meeting__error { font-size: 13px; color: #c0392b; }
.kleyman-meeting__consent .kleyman-meeting__error { position: absolute; top: 100%; inset-inline-start: 28px; }
.kleyman-meeting .kleyman-hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }

.kleyman-meeting__done { text-align: center; padding: 10px 0 4px; }
.kleyman-meeting__done[hidden] { display: none; }
.kleyman-meeting__done-icon {
	display: inline-grid;
	place-items: center;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background: rgba(17, 121, 58, .12);
	color: var(--kleyman-green);
	margin-bottom: 16px;
}
.kleyman-meeting__done h3 { margin: 0 0 8px; font-size: 26px; color: var(--kleyman-dark); }
.kleyman-meeting__done p { margin: 0 0 20px; color: var(--kleyman-text-muted); font-size: 16px; }

/* Mobile: bottom sheet. */
@media (max-width: 640px) {
	.kleyman-meeting { padding: 0; place-items: end stretch; }
	.kleyman-meeting__panel {
		width: 100%;
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: 24px 24px 0 0;
		padding: 30px 20px calc(22px + env(safe-area-inset-bottom, 0px));
		transform: translateY(40px);
	}
	.kleyman-meeting__close { top: 16px; inset-inline-end: 14px; width: 38px; height: 38px; }
	.kleyman-meeting__head { margin-bottom: 20px; }
	.kleyman-meeting__title { font-size: 32px; }
	.kleyman-meeting__lede { font-size: 15px; }
	.kleyman-meeting__form { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
	.kleyman-meeting__field:has(#kleyman-meeting-name),
	.kleyman-meeting__field:has(#kleyman-meeting-phone) { grid-column: 1 / -1; }
	.kleyman-meeting__chip span { height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.kleyman-meeting__panel, .kleyman-meeting__backdrop { transition: none; }
}
