/* ---------- Trial modal (template-parts/trial-modal.php) ---------- */
/* The dialog is a transparent scroll area over the page; .trial-modal-panel is the white card. */
.trial-modal {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: clamp(16px, 3vw, 40px) var(--gutter);
	background: transparent;
	border: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.trial-modal::backdrop { background: rgba(20, 26, 61, .55); }
html:has(.trial-modal[open]) { overflow: hidden; }

.trial-modal-panel {
	position: relative;
	width: min(1200px, 100%);
	margin: 0 auto;
	padding: clamp(32px, 4vw, 57px) clamp(16px, 4.2vw, 50px) clamp(24px, 4.2vw, 50px);
	background: #fff;
	border-radius: 16px;
}
.trial-modal-close {
	position: absolute;
	top: clamp(16px, 2.2vw, 30px);
	right: clamp(16px, 2.6vw, 34px);
	width: 36px;
	height: 36px;
}
/* × drawn with two 3px bars */
.trial-modal-close::before,
.trial-modal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 3px;
	background: var(--international-klein-blue);
	transform: translate(-50%, -50%) rotate(45deg);
}
.trial-modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.trial-modal-close:hover { opacity: .7; }

.trial-modal-head {
	margin-bottom: clamp(32px, 4.5vw, 65px);
	text-align: center;
}
.trial-modal-head img { width: clamp(100px, 10.6vw, 152px); height: auto; margin: 0 auto; }
.trial-modal-head h2 {
	font-family: var(--font-title-en);
	font-weight: 400;
	font-size: clamp(36px, 29px + 1.88vw, 56px);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--international-klein-blue);
}
.trial-modal-head p {
	font-family: var(--font-caption-jp);
	font-size: clamp(16px, 14.6px + .38vw, 20px);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: .01em;
	color: var(--moody-blue);
}
/* Opening, like the scroll reveal: the backdrop fades in, the panel rises, then the logo and
   the form.
   Closing is a quick fade (rizzpilatesCloseDialog in trial-form.js adds .is-closing). */
@media (prefers-reduced-motion: no-preference) {
	.trial-modal[open]::backdrop { animation: dlg-fade-in .4s ease both; }
	.trial-modal[open] .trial-modal-panel { animation: dlg-rise-in .7s cubic-bezier(.22, .61, .36, 1) both; }
	.trial-modal[open] .trial-modal-head img { animation: dlg-fade-in .6s ease .15s both; }
	.trial-modal[open] .trial-modal-head ~ * { animation: dlg-rise-in .8s cubic-bezier(.22, .61, .36, 1) .35s both; }
	.trial-modal.is-closing::backdrop { animation: dlg-fade-out .3s ease both; }
	.trial-modal.is-closing .trial-modal-panel { animation: dlg-sink-out .3s ease both; }
}

/* Flat inside the modal; the panel already sits on the backdrop. */
.trial-modal .booking-body { box-shadow: none; }

@media (max-width: 640px) {
	.trial-modal { padding-inline: 12px; }
}