/* RP Amelia Lazy: the reserved panel that stands in for the booking widget
   until the visitor asks for it.

   The panel reserves exactly the height the widget occupies (560px at every
   breakpoint, measured), so swapping one for the other shifts nothing. */

.rp-amlazy{
	min-height:560px;
	display:flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
}

/* While Amelia boots it briefly renders taller than its settled size before
   snapping back. Pinning the height and clipping during mount keeps that
   entirely inside the box, so nothing on the page moves. */
.rp-amlazy.is-mounting{
	display:block;
	height:560px;
	overflow:hidden;
}

/* Settled: drop the centring, keep the reserved height as a floor. The widget
   is itself 560px, so the swap shifts nothing. It may grow past this as the
   visitor moves through the steps, but that is their own interaction and is
   excluded from layout-shift scoring. */
.rp-amlazy.is-loaded{
	display:block;
}

.rp-amlazy__panel{
	width:100%;
	max-width:520px;
	text-align:center;
	padding:38px 24px;
	box-sizing:border-box;
	background:var(--wp--preset--color--canvas,#F6F5EE);
	border-radius:14px;
}

.rp-amlazy__lead{
	margin:0 0 20px;
	font-size:17px;
	line-height:1.5;
	color:var(--wp--preset--color--navy,#002c41);
	font-weight:600;
}

/* Matches the site's primary button: solid red, 8px radius, red glow, and the
   same red kept on hover/focus/active so it never disappears on a dark band. */
.rp-amlazy__btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	min-height:52px;
	padding:15px 34px;
	border:0;
	border-radius:8px;
	background:var(--wp--preset--color--action,#e4022e);
	color:#fff;
	font-family:inherit;
	font-size:16px;
	font-weight:700;
	letter-spacing:.01em;
	line-height:1.2;
	text-decoration:none;
	cursor:pointer;
	box-shadow:0 8px 18px rgba(228,2,46,.26);
	transition:box-shadow .15s ease;
}
.rp-amlazy__btn:hover,
.rp-amlazy__btn:focus,
.rp-amlazy__btn:active{
	background:var(--wp--preset--color--action,#e4022e);
	color:#fff;
	box-shadow:0 10px 22px rgba(228,2,46,.34);
}
.rp-amlazy__btn[disabled]{
	cursor:default;
	opacity:.85;
}
.rp-amlazy__btn--link{ text-decoration:none; }

/* Focus ring: rp.css already gates :focus-visible site-wide and toggles
   .rp-kb-focus for programmatically returned keyboard focus. Nothing is
   redefined here, so this button inherits exactly that behaviour. */

.rp-amlazy__hint{
	margin:16px 0 0;
	font-size:14px;
	line-height:1.5;
	color:#5a6168;
}

.rp-amlazy__status{
	margin:0;
	padding:0;
	/* visible only to assistive tech; the button label carries the visual state */
	position:absolute;
	width:1px;height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	clip-path:inset(50%);
	white-space:nowrap;
}

/* Spinner shown in the button while Amelia is being fetched. */
.rp-amlazy__spin{
	width:17px;height:17px;
	border:2px solid rgba(255,255,255,.45);
	border-top-color:#fff;
	border-radius:50%;
	animation:rp-amlazy-spin .7s linear infinite;
	flex:0 0 auto;
}
@keyframes rp-amlazy-spin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce){
	.rp-amlazy__spin{ animation-duration:2.4s; }
	.rp-amlazy__btn{ transition:none; }
}

/* The mounted widget should not inherit the panel's centring. */
.rp-amlazy [id^="amelia-v2-booking"]{ width:100%; }

@media (max-width:600px){
	.rp-amlazy__panel{ padding:30px 18px; }
	.rp-amlazy__lead{ font-size:16px; }
}