/**
 * Zadson consultation popup.
 *
 * Shares the chat assistant's two-tone palette: a deep neutral carries the
 * offer panel, brass is reserved for detail and the primary call to action.
 * Tokens are injected per-preset from the settings screen.
 */

.zadson-pop {
	--zadson-brand: #1c1f26;
	--zadson-accent: #c0a062;
	--zadson-accent-strong: #ad8a42;
	--zadson-canvas: #f7f6f4;
	--zadson-ink: #14161a;

	--zadson-on-accent: var(--zadson-ink);
	/* The logo's own green (#317336). WhatsApp's #25d366 measures ~1.9:1 on
	   white, below the 3:1 WCAG asks of a control's boundary. */
	--zadson-whatsapp: #317336;
	--zadson-ink-soft: #4a5058;
	--zadson-ink-muted: #858b94;
	--zadson-border: #e7e5e1;
	--zadson-brand-dark: var(--zadson-brand);
	--zadson-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
	--zadson-ease: cubic-bezier(0.22, 0.8, 0.28, 1);

	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.zadson-pop {
		--zadson-brand-dark: color-mix(in srgb, var(--zadson-brand) 74%, #000);
	}
}

.zadson-pop[hidden] { display: none; }

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

/* Reset theme leakage — themes love a tall min-height on inputs. */
.zadson-pop input,
.zadson-pop button {
	margin: 0;
	min-height: 0;
	max-width: none;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	font-family: inherit;
}

.zadson-pop__ico {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
}

/* Backdrop --------------------------------------------------------------- */

.zadson-pop__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 13, 16, 0.62);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: zadson-pop-fade 0.4s var(--zadson-ease) both;
}

@keyframes zadson-pop-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Dialog ----------------------------------------------------------------- */

.zadson-pop__dialog {
	position: relative;
	display: grid;
	grid-template-columns: 40% 60%;
	width: 100%;
	max-width: 940px;
	max-height: calc(100vh - 48px);
	overflow: hidden;
	border-radius: 22px;
	background: #ffffff;
	box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.5);
	animation: zadson-pop-in 0.55s var(--zadson-spring) both;
}

@keyframes zadson-pop-in {
	from { opacity: 0; transform: translateY(28px) scale(0.94); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.zadson-pop__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--zadson-border);
	border-radius: 50%;
	background: #ffffff;
	color: var(--zadson-ink-soft);
	cursor: pointer;
	transition: background 0.2s var(--zadson-ease), color 0.2s var(--zadson-ease),
		transform 0.3s var(--zadson-spring);
}

.zadson-pop__close:hover {
	background: var(--zadson-brand);
	border-color: var(--zadson-brand);
	color: #ffffff;
	transform: rotate(90deg);
}

.zadson-pop__close:focus-visible {
	outline: 2.5px solid var(--zadson-accent-strong);
	outline-offset: 2px;
}

/* Left panel — the offer -------------------------------------------------- */

.zadson-pop__aside {
	position: relative;
	display: flex;
	background: linear-gradient(160deg, var(--zadson-brand), var(--zadson-brand-dark));
	background-size: cover;
	background-position: center;
	color: #ffffff;
	overflow: hidden;
}

/* Legibility scrim, so an optional background photo never fights the text. */
.zadson-pop__aside::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(20, 22, 26, 0.9), rgba(12, 13, 16, 0.96));
}

/* Soft brass glow in the corner. */
.zadson-pop__aside::after {
	content: "";
	position: absolute;
	top: -30%;
	right: -40%;
	width: 90%;
	height: 80%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--zadson-accent) 26%, transparent), transparent);
	pointer-events: none;
}

.zadson-pop__aside-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 44px 36px;
	width: 100%;
}

/* The highlight figure is optional. Without it the column would sit top-heavy
   with dead space beneath, so centre the content instead. */
.zadson-pop__aside-inner--nostat { justify-content: center; }

.zadson-pop .zadson-pop__badge {
	align-self: flex-start;
	margin-bottom: 26px;
	padding: 7px 20px;
	border-radius: 999px;
	/* Badges carry text, so they use the deeper accent tone: white on the pure
	   logo red is only 4.21:1, under the 4.5 AA asks of small text. */
	background: var(--zadson-accent-strong);
	color: var(--zadson-on-accent);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.zadson-pop__title {
	margin: 0 0 12px;
	color: #ffffff;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.zadson-pop__subtitle {
	margin: 0 0 32px;
	color: rgba(255, 255, 255, 0.62);
	font-size: 15px;
	line-height: 1.5;
}

.zadson-pop__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.zadson-pop__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 15.5px;
	line-height: 1.4;
}

.zadson-pop__list .zadson-pop__ico {
	color: var(--zadson-accent);
	stroke-width: 2.4;
}

.zadson-pop__stat {
	margin-top: auto;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.zadson-pop__stat strong {
	display: block;
	color: var(--zadson-accent);
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.zadson-pop__stat span {
	display: block;
	margin-top: 6px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13.5px;
}

/* Right panel — the form -------------------------------------------------- */

.zadson-pop__main {
	position: relative;
	padding: 52px 46px 44px;
	overflow-y: auto;
	background: #ffffff;
}

.zadson-pop__eyebrow {
	margin: 0 0 18px;
	color: var(--zadson-accent-strong);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
}

.zadson-pop__heading {
	margin: 0 0 30px;
	color: var(--zadson-ink);
	font-size: 29px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.zadson-pop__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.zadson-pop__field label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 9px;
	color: var(--zadson-ink);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.zadson-pop__field label .zadson-pop__ico { color: var(--zadson-accent-strong); }

.zadson-pop__req { color: #c0392b; }

/* Phone field: a fixed +971 sitting beside the input, sharing its box. The
   prefix is markup, not part of the value — the script prepends it on submit. */
.zadson-pop__tel {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.zadson-pop__cc {
	display: flex;
	align-items: center;
	flex: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--zadson-pop-muted, #6b7280);
	user-select: none;
	white-space: nowrap;
}

.zadson-pop__tel input { flex: 1 1 auto; }

.zadson-pop__field input {
	width: 100%;
	padding: 17px 20px;
	border: 1px solid transparent;
	border-radius: 13px;
	background: var(--zadson-canvas);
	color: var(--zadson-ink);
	font-size: 15.5px;
	transition: border-color 0.2s var(--zadson-ease), background 0.2s var(--zadson-ease),
		box-shadow 0.2s var(--zadson-ease);
}

.zadson-pop__field input::placeholder { color: var(--zadson-ink-muted); }

.zadson-pop__field input:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--zadson-accent-strong);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--zadson-accent) 24%, transparent);
}

.zadson-pop__field.has-error input {
	border-color: #c0392b;
	background: #fdf4f3;
}

.zadson-pop__error {
	display: block;
	margin-top: 6px;
	color: #c0392b;
	font-size: 12.5px;
}

.zadson-pop__error:not(:empty) { animation: zadson-pop-shake 0.32s var(--zadson-ease); }

@keyframes zadson-pop-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.zadson-pop__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
}

.zadson-pop .zadson-pop__submit {
	margin-top: 4px;
	padding: 19px 24px;
	border: 0;
	border-radius: 13px;
	/* Solid deeper tone rather than a gradient from the pure accent: on the red
	   presets the light end of that gradient measured 4.21:1 against white,
	   under AA. This keeps the whole button at 5:1 or better. */
	background: var(--zadson-accent-strong);
	color: var(--zadson-on-accent);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--zadson-accent) 85%, transparent);
	transition: filter 0.2s var(--zadson-ease), transform 0.28s var(--zadson-spring);
}

.zadson-pop .zadson-pop__submit:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-2px); }
.zadson-pop .zadson-pop__submit:active:not(:disabled) { transform: translateY(0) scale(0.99); }
.zadson-pop .zadson-pop__submit:disabled { opacity: 0.55; cursor: not-allowed; }

.zadson-pop__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 2px 0 0;
	color: var(--zadson-ink-muted);
	font-size: 12px;
}

.zadson-pop__note .zadson-pop__ico { width: 13px; height: 13px; }

/* "or" divider */

.zadson-pop__or {
	position: relative;
	margin: 26px 0 18px;
	text-align: center;
}

.zadson-pop__or::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--zadson-border);
}

.zadson-pop__or span {
	position: relative;
	padding: 0 16px;
	background: #ffffff;
	color: var(--zadson-ink-muted);
	font-size: 13px;
}

.zadson-pop__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	padding: 17px 24px;
	border: 1.5px solid var(--zadson-whatsapp);
	border-radius: 13px;
	background: #ffffff;
	color: var(--zadson-whatsapp);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s var(--zadson-ease), color 0.2s var(--zadson-ease),
		transform 0.28s var(--zadson-spring);
}

.zadson-pop__whatsapp:hover {
	background: var(--zadson-whatsapp);
	color: #ffffff;
	transform: translateY(-2px);
}

.zadson-pop__whatsapp .zadson-pop__ico { width: 21px; height: 21px; }

/* Success state ---------------------------------------------------------- */

.zadson-pop__done {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 320px;
	animation: zadson-pop-in 0.5s var(--zadson-spring) both;
}

.zadson-pop__done[hidden] { display: none; }

.zadson-pop__done-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	margin-bottom: 22px;
	border-radius: 50%;
	background: var(--zadson-accent);
	color: var(--zadson-on-accent);
}

.zadson-pop__done-mark .zadson-pop__ico { width: 30px; height: 30px; stroke-width: 2.4; }

.zadson-pop__done h3 {
	margin: 0 0 10px;
	color: var(--zadson-ink);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.zadson-pop__done p {
	margin: 0;
	max-width: 340px;
	color: var(--zadson-ink-soft);
	font-size: 15px;
	line-height: 1.6;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 860px) {
	.zadson-pop { padding: 0; align-items: stretch; }

	.zadson-pop__dialog {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		max-width: none;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
		overflow-y: auto;
	}

	/* The offer panel becomes a compact banner rather than a full column. */
	.zadson-pop__aside-inner { padding: 30px 26px 26px; }

	.zadson-pop__title { font-size: 29px; }
	.zadson-pop__subtitle { margin-bottom: 20px; font-size: 14px; }
	.zadson-pop__badge { margin-bottom: 18px; }
	.zadson-pop__list { gap: 10px; }
	.zadson-pop__list li { font-size: 14.5px; }

	.zadson-pop__stat {
		margin-top: 22px;
		padding-top: 20px;
	}

	.zadson-pop__stat strong { font-size: 30px; }

	.zadson-pop__main { padding: 30px 26px 34px; }
	.zadson-pop__heading { font-size: 23px; margin-bottom: 24px; }
	.zadson-pop__eyebrow { margin-bottom: 14px; }
	.zadson-pop__field input { padding: 15px 17px; }
	.zadson-pop__submit { padding: 17px 20px; font-size: 13px; }
}

@media (max-width: 480px) {
	/* Hide the checklist on the smallest screens so the form stays above the
	   fold — the offer is already stated by the title. */
	.zadson-pop__list { display: none; }
	.zadson-pop__title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.zadson-pop *,
	.zadson-pop *::before,
	.zadson-pop *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}