/*
 * Homepage service popup (one shared <dialog class="pjp">). Loaded only when a homepage card has a related service.
 * Glass: translucent navy #233A7A with modest backdrop blur (solid navy where backdrop-filter is unsupported);
 * a thin cyan #29AAE1 highlight travels around the border. ONLY that decorative ring animates (the content is
 * stationary); it never receives pointer events, and it is a plain static ring under prefers-reduced-motion.
 */

html.pjp-open { overflow: hidden; scrollbar-gutter: stable; }

/* Closed means display:none; only the open state is a flex stage. */
.pjp { display: none; }
.pjp[open] {
	--pjp-gap: clamp(12px, 3vw, 32px);
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	width: 100%; height: 100%;
	max-width: none; max-height: none;
	margin: 0;
	padding: max(var(--pjp-gap), env(safe-area-inset-top, 0px)) max(var(--pjp-gap), env(safe-area-inset-right, 0px)) max(var(--pjp-gap), env(safe-area-inset-bottom, 0px)) max(var(--pjp-gap), env(safe-area-inset-left, 0px));
	border: 0;
	background: transparent; /* the stage itself is invisible: a click on it is a click OUTSIDE the glass box */
	color: #EAF1FB;
	overflow: visible;
	box-sizing: border-box;
	direction: rtl;
	text-align: start;
	font-family: var(--pejvak-font);
}
.pjp::backdrop { background: rgba(8, 16, 42, 0.55); }
.pjp *, .pjp *::before, .pjp *::after { box-sizing: border-box; }

@property --pjp-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.pjp-box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(760px, 100%);
	max-height: 100%;
	border-radius: 20px;
	background: #1F3470;                                   /* readable solid fallback */
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 24px 60px rgba(4, 10, 30, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	overflow: hidden;
	outline: none;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.pjp-box {
		background: rgba(35, 58, 122, 0.72);
		-webkit-backdrop-filter: blur(10px) saturate(1.15);
		backdrop-filter: blur(10px) saturate(1.15);        /* modest, static: not animated */
	}
}

/* The travelling light: a masked 1px conic gradient on the border only. */
.pjp-ring {
	position: absolute;
	inset: 0;
	z-index: 0;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
	background: conic-gradient(from var(--pjp-angle), rgba(41, 170, 225, 0) 0deg, rgba(41, 170, 225, 0) 255deg, rgba(41, 170, 225, 0.85) 322deg, rgba(41, 170, 225, 0) 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	mask-composite: exclude;
	animation: pjp-orbit 9s linear infinite;
}
@keyframes pjp-orbit { to { --pjp-angle: 360deg; } }

.pjp-head {
	position: relative; z-index: 1;
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 14px 20px 14px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pjp-title { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.5; color: #fff; unicode-bidi: isolate; }
.pjp-close {
	flex: 0 0 auto; width: 44px; height: 44px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
	background: rgba(255, 255, 255, 0.08); color: #fff;
	font-size: 26px; line-height: 1; cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pjp-close:hover { background: rgba(255, 255, 255, 0.18); border-color: #29AAE1; }
.pjp-close:focus-visible, .pjp-btn:focus-visible, .pjp-box:focus-visible { outline: 3px solid #29AAE1; outline-offset: 2px; }
.pjp-box:focus:not(:focus-visible) { outline: none; }

.pjp-body {
	position: relative; z-index: 1;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 24px max(24px, env(safe-area-inset-bottom, 0px));
	font-size: 1rem; line-height: 1.9; word-spacing: normal;
}
.pjp-body p { margin: 0 0 0.9em; word-spacing: normal; unicode-bidi: isolate; }
.pjp-lead { font-size: 1.125rem; font-weight: 600; color: #fff; }
.pjp-text { color: #DCE6F5; }
.pjp-section { margin: 1.1em 0 0; }
.pjp-section h3 { margin: 0 0 0.45em; font-size: 1rem; font-weight: 700; color: #8FDAF7; unicode-bidi: isolate; letter-spacing: normal; word-spacing: normal; }
.pjp-list { list-style: none; margin: 0 0 0.6em; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 2px 28px; }
.pjp-list > li { list-style: none; } /* the parent theme's `ul > li { list-style: outside none square }` sits on the <li> itself and beat the list-style:none above: that was the extra white square next to our cyan ::before dot */
.pjp-list > li::marker { content: none; }
.pjp-list li { position: relative; min-width: 0; padding: 4px 0; padding-inline-start: 22px; color: #EAF1FB; unicode-bidi: isolate; }
.pjp-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.95em; width: 7px; height: 7px; border-radius: 50%; background: #29AAE1; }

/* Inline accordion (glass variant of the service-page accordion): native details/summary, chevron at the far LEFT. */
.pjp-acc { margin: 1.1em 0 0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
.pjp-acc > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	min-height: 48px; padding: 10px 16px; cursor: pointer; list-style: none; border-radius: 12px;
	-webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease;
}
.pjp-acc > summary::-webkit-details-marker { display: none; }
.pjp-acc > summary::marker { content: none; }
.pjp-acc > summary:hover { background-color: rgba(255, 255, 255, 0.09); }
.pjp-acc > summary:focus-visible { outline: 2px solid #29AAE1; outline-offset: -2px; }
.pjp-acc-title { font-size: 1rem; font-weight: 700; line-height: 1.6; color: #8FDAF7; unicode-bidi: isolate; letter-spacing: normal; word-spacing: normal; }
.pjp-acc > summary::after {
	content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-inline: 4px 6px;
	border-right: 2.5px solid #29AAE1; border-bottom: 2.5px solid #29AAE1;
	transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease;
}
.pjp-acc[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.pjp-acc[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, 0.16); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pjp-acc-body { padding: 10px 16px 8px; }
.pjp-acc-body .pjp-list { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .pjp-acc > summary, .pjp-acc > summary::after { transition: none; } }

.pjp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.1em; }
.pjp-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 10px 20px;
	border: 1px solid #29AAE1; border-radius: 12px;
	background: #29AAE1; color: #0F2457;
	font: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pjp-btn:hover { background: #5BC4EE; border-color: #5BC4EE; color: #0F2457; text-decoration: none; }
.pjp-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.pjp-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

.pjp-loading { display: flex; align-items: center; gap: 12px; color: #DCE6F5; }
.pjp-dots { width: 22px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #29AAE1, #8FDAF7); opacity: 0.7; animation: pjp-pulse 1.2s ease-in-out infinite; }
@keyframes pjp-pulse { 50% { opacity: 0.25; } }
.pjp-error p { color: #FFD9D9; }

@media (prefers-reduced-motion: reduce) {
	.pjp-ring { animation: none; background: rgba(41, 170, 225, 0.5); } /* a plain static ring */
	.pjp-dots { animation: none; }
	.pjp-close, .pjp-btn { transition: none; }
}