/* Shared «مشاوره با پژواک» dialog (#pjs-consult): used by the Services pages and the homepage header button.
   Markup: pejvak_render_consult_dialog() in inc/pejvak-services-consult.php. */
/* ---- consultation dialog (the only dialog) ---- */
/* Closed means display:none; only the open state is a flex column. */
#pjs-consult { display: none; }
#pjs-consult[open] {
	display: flex;
	flex-direction: column;
	width: min(480px, calc(100% - 32px));
	max-height: calc(100vh - 32px);                                  /* fallback */
	max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 16px;
	overflow: hidden; /* only .pjs-consult-body scrolls; the header stays put */
	background: #fff;
	color: #243951;
	box-shadow: 0 24px 70px rgba(16, 35, 68, 0.25);
	font: inherit;
	direction: rtl;
	text-align: start;
}
#pjs-consult::backdrop { background: rgba(20, 35, 69, 0.55); }

#pjs-consult .pjs-consult-head {
	position: sticky; top: 0; z-index: 1;
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 12px 20px;
	background: #fff;
	border-bottom: 1px solid #E1E8F0;
}
#pjs-consult .pjs-consult-head h2 { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.5; color: #233A7A; }
#pjs-consult-close {
	flex: 0 0 auto; width: 44px; height: 44px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid #D5DFEA; border-radius: 50%;
	background: #fff; color: #233A7A; font-size: 26px; line-height: 1; cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
#pjs-consult-close:hover { background: #F0F8FD; border-color: #29AAE1; }
#pjs-consult-close:focus-visible { outline: 2px solid #29AAE1; outline-offset: 2px; }

#pjs-consult .pjs-consult-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 20px max(20px, env(safe-area-inset-bottom, 0px));
	display: grid;
	gap: 12px;
	align-content: start;
}
#pjs-consult .pjs-consult-body p { margin: 0; word-spacing: normal; font-size: 1rem; line-height: 1.8; color: #243951; }
#pjs-consult .pjs-consult-context { padding: 8px 12px; background: #F0F8FD; border-radius: 10px; font-size: 0.9375rem; }
#pjs-consult .pjs-consult-context strong { color: #233A7A; unicode-bidi: isolate; }
#pjs-consult .pjs-phones { display: grid; gap: 12px; }
#pjs-consult .pjs-phone {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px;
	min-height: 56px; padding: 12px 18px;
	background: #233A7A; color: #fff; border-radius: 12px;
	font-size: 1rem; font-weight: 600; text-decoration: none;
	transition: background-color 0.15s ease;
}
#pjs-consult .pjs-phone:hover { background: #36549A; color: #fff; }
#pjs-consult .pjs-phone:focus-visible { outline: 2px solid #29AAE1; outline-offset: 2px; }
#pjs-consult .pjs-phone-number { font-size: 1.125rem; letter-spacing: 0.02em; unicode-bidi: isolate; }

/* while the dialog is open: no background scrolling, no layout shift from the scrollbar */
html.pjs-scroll-locked { overflow: hidden; scrollbar-gutter: stable; }

@media (prefers-reduced-motion: reduce) {
	#pjs-consult .pjs-phone,
	#pjs-consult-close { transition: none; }
}