/* Exit-intent dialog — scoped .nc-exit-*. Ported from the approved prototype
   (design_handoff_homepage/Exit Intent Dialog.dc.html); tokens/spacing are
   locked (spec §8), not up for redesign. */

.nc-exit-shell, .nc-exit-shell * { box-sizing: border-box; }

.nc-exit-shell {
	position: fixed;
	right: clamp(14px, 3vw, 26px);
	bottom: clamp(14px, 3vw, 26px);
	z-index: 9995;
	max-width: calc(100vw - 28px);
}
.nc-exit-shell[hidden] { display: none !important; }

.nc-exit-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 16, 29, 0.6);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	display: none; /* corner variant has no backdrop (spec §5) */
}

.nc-exit-card {
	position: relative;
	width: min(410px, calc(100vw - 28px));
	max-height: 88vh;
	overflow: auto;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 30px 70px rgba(8, 14, 26, 0.42);
	animation: ncExitSlide 0.32s cubic-bezier(.2,.8,.3,1) both;
	font-family: 'Hanken Grotesk', sans-serif;
	color: #1a1a1a;
}

/* 44px hit area around a visually-28px close circle (spec §7). Requires
   content-box explicitly — the file-wide border-box reset above would
   otherwise shrink the visible circle to 12px and the hit area to 28px
   (caught by Task 6's code review, verified empirically in a browser). */
.nc-exit-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	box-sizing: content-box;
	width: 28px;
	height: 28px;
	padding: 8px;
	margin: -8px;
	background-clip: content-box;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: #f1f3f7;
	color: #7a818e;
}
.nc-exit-close:hover { background-color: #e4e8f0; color: #16233b; }

.nc-exit-grid { display: grid; grid-template-columns: 1fr; }

.nc-exit-left {
	position: relative;
	overflow: hidden;
	background: linear-gradient(158deg, #1F3864 0%, #16233b 100%);
	color: #fff;
	padding: 18px 20px 19px;
}
.nc-exit-left::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.5;
	background-image:
		linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
	background-size: 34px 34px;
}
.nc-exit-left > * { position: relative; }

.nc-exit-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #bcd0f0;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.16);
	padding: 6px 11px;
	border-radius: 100px;
}
.nc-exit-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #6EE7A8; flex: none; }

.nc-exit-h2 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	font-size: 20px;
	line-height: 1.08;
	letter-spacing: -0.028em;
	margin: 16px 0 0;
	text-wrap: balance;
}

.nc-exit-sub { font-size: 13.5px; line-height: 1.6; color: #c3d0e6; margin: 14px 0 0; max-width: 40ch; }

/* The theme's own reset — `.nc-site h1, .nc-site h2, .nc-site h3, .nc-site p
   { margin: 0 }` in site.css — is class+element (0-1-1), so it outranks a bare
   .nc-exit-* class (0-1-0) and was silently zeroing this dialog's vertical
   rhythm on every page with the nc-site body class, i.e. most of the site.
   Re-scoping under .nc-exit-shell (0-2-0) puts the widget's own spacing back
   in charge without reaching for !important. Any future margin on an h1/h2/h3/p
   inside this dialog needs the same treatment. */
.nc-exit-shell .nc-exit-h2 { margin: 16px 0 0; }
.nc-exit-shell .nc-exit-sub { margin: 14px 0 0; }
.nc-exit-sub--full { display: none; }
.nc-exit-sub--short { display: block; }

.nc-exit-bullets { display: none; }
.nc-exit-bullet { display: flex; align-items: flex-start; gap: 10px; }
.nc-exit-check {
	width: 18px; height: 18px; border-radius: 50%;
	background: rgba(110,231,168,0.16);
	display: flex; align-items: center; justify-content: center;
	flex: none; margin-top: 1px;
}
.nc-exit-bullet span { font-size: 13.5px; line-height: 1.45; color: #dbe4f2; font-weight: 500; }
.nc-exit-fineprint { display: none; }

.nc-exit-right { background: #fff; padding: 16px 20px 18px; display: flex; flex-direction: column; }
.nc-exit-pickrow { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding-right: 42px; }
.nc-exit-pick-label { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 15px; color: #16233b; letter-spacing: -0.01em; }
.nc-exit-slots { font-size: 11.5px; font-weight: 600; color: #16A34A; display: inline-flex; align-items: center; gap: 6px; }
.nc-exit-slots-dot { width: 5px; height: 5px; border-radius: 50%; background: #16A34A; flex: none; }

.nc-exit-cal { width: 100%; height: clamp(180px, 32vh, 400px); border: 1px solid #eceff4; border-radius: 12px; margin-top: 12px; overflow: hidden; background: #f7f9fc; }
.nc-exit-cal iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Link mode (a per-post link replaces the booking calendar). There's no
   calendar to fill the right half, so the split panel collapses to one
   column and the button sits directly under the copy. */
.nc-exit-shell--link .nc-exit-grid { grid-template-columns: 1fr; }
/* 40ch is a sensible measure in the split panel's ~354px column, but this
   one column is 444px — the cap left the copy filling only ~73% of it with
   a ragged right edge. Let it run the full width here. */
.nc-exit-shell--link .nc-exit-sub { max-width: none; }
/* One rhythm for the whole stack: 16 / 14 / 24 / 14. The opt-out's share of
   it lives in its own block further down, next to that element's other
   link-mode rules — same specificity (0-2-0), so a second margin-top here
   would just lose to it on source order. */
.nc-exit-shell--link .nc-exit-cta { margin-top: 24px; }

.nc-exit-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 22px;
	background: #fff;
	color: #16233b !important;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	text-decoration: none !important;
	padding: 14px 26px;
	border-radius: 10px;
	transition: transform .18s ease, box-shadow .18s ease;
}
.nc-exit-cta:hover { color: #16233b !important; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,0.28); }
.nc-exit-cta__glyph { flex: none; margin-top: -2px; }

/* The opt-out sits on the dark panel here, not the white one. */
.nc-exit-shell--link .nc-exit-optout {
	display: block;
	margin-top: 14px;
	color: rgba(255,255,255,0.5);
}
.nc-exit-shell--link .nc-exit-optout:hover { color: #fff; }

.nc-exit-footrow { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.nc-exit-reschedule { font-size: 12.5px; color: #9aa1ae; }
.nc-exit-optout { font-size: 12.5px; color: #8a919e; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; padding: 0; font-family: inherit; }
.nc-exit-optout:hover { color: #16233b; }

@media (min-width: 1024px) {
	/* inset:0 must stand alone here — an earlier `right:auto; bottom:auto`
	   (meant to undo the corner variant's offsets) silently collapsed this
	   back to a shrink-to-fit box at the top-left, so the backdrop covered
	   only the card's own box and the card centred inside that instead of
	   the viewport. inset:0 already overrides both corner offsets. */
	.nc-exit-shell {
		position: fixed; inset: 0; max-width: none;
		display: flex; align-items: center; justify-content: center;
		padding: clamp(14px, 3vw, 30px);
	}
	.nc-exit-backdrop { display: block; animation: ncExitFade 0.22s ease-out both; }
	.nc-exit-card {
		width: min(980px, 100%); max-height: 92vh; border-radius: 20px;
		box-shadow: 0 40px 100px rgba(8,14,26,0.5);
		animation: ncExitPop 0.3s cubic-bezier(.2,.8,.3,1) both;
	}
	.nc-exit-grid { grid-template-columns: 0.88fr 1fr; }
	/* Link mode is a single column, so it doesn't need the 980px the split
	   panel does. Desktop-only: below 1024px the corner variant's own
	   410px cap already applies. */
	.nc-exit-shell--link .nc-exit-card { width: min(520px, 100%); }
	.nc-exit-left { padding: clamp(26px, 3vw, 38px); }
	.nc-exit-h2 { font-size: clamp(25px, 2.6vw, 32px); }
	.nc-exit-sub { font-size: 14.5px; }
	.nc-exit-sub--full { display: block; }
	.nc-exit-sub--short { display: none; }
	.nc-exit-bullets { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
	.nc-exit-fineprint { display: block; margin-top: 24px; font-size: 11.5px; color: #8fa5c8; letter-spacing: 0.02em; }
	.nc-exit-right { padding: clamp(26px, 3vw, 34px); }
	.nc-exit-cal { height: clamp(300px, 46vh, 520px); }
}

@keyframes ncExitFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ncExitPop { from { opacity: 0; transform: translateY(14px) scale(0.975); } to { opacity: 1; transform: none; } }
@keyframes ncExitSlide { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.nc-exit-backdrop, .nc-exit-card { animation: ncExitFade 0.15s ease-out both !important; }
}