/* ==========================================================================
   MEETR: Appointments panel explainer
   Sits directly above ListingPro's .lp-booking-section in the listing
   sidebar. Uses tokens only, and a .meetr- prefixed class, so it cannot
   collide with ListingPro's own styles.
   ========================================================================== */

.meetr-booking-help {
	background: var(--meetr-mist);
	border: 1px solid var(--meetr-border);
	border-radius: 10px;
	padding: 1rem 1.1rem;
	margin: 0 0 1rem;
	font-family: var(--meetr-font-body);
}

.meetr-booking-help__title {
	margin: 0 0 0.6rem;
	font-family: var(--meetr-font-body);
	font-size: var(--meetr-step--1);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--meetr-summit);
}

.meetr-booking-help__steps {
	margin: 0;
	padding: 0 0 0 1.15rem;
	list-style: decimal;
	color: var(--meetr-text-muted);
	font-size: var(--meetr-step--1);
	line-height: 1.5;
}

.meetr-booking-help__steps li + li {
	margin-top: 0.45rem;
}

/* The panel's own footer carries the timezone line. It ships small and
   light enough to read as decoration, which is part of why nobody noticed
   whose clock it was quoting. */
.lp-booking-section-footer-timezone {
	color: var(--meetr-text-muted);
}

.lp-booking-section-footer-view-switch {
	color: var(--meetr-link);
	cursor: pointer;
}

/* The explainer sits INSIDE .lp-booking-section, above the calendar, so it
   inherits the panel's plan gating. Pull it flush with the panel's own
   padding rather than letting it float in the middle. */
.lp-booking-section .meetr-booking-help {
	margin-bottom: 0.9rem;
}

/* These replace the panel on listings without Appointments, so they need the
   breathing room the panel would have had. */
.meetr-booking-help--guest,
.meetr-booking-help--upgrade {
	margin-bottom: 1.25rem;
}

/* The upgrade prompt is only ever seen by the guide who owns the listing, so
   it can carry brand weight without shouting at guests. */
.meetr-booking-help--upgrade {
	background: var(--meetr-surface);
	border: 1px solid var(--meetr-glacier);
}

.meetr-booking-help__note {
	margin: 0.5rem 0 0;
	color: var(--meetr-summit);
	font-size: var(--meetr-step--1);
	font-weight: 600;
	line-height: 1.45;
}

.meetr-booking-help__cta {
	display: inline-block;
	margin-top: 0.9rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--meetr-alpine);
	color: #FFFFFF;
	font-size: var(--meetr-step--1);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.meetr-booking-help__cta:hover,
.meetr-booking-help__cta:focus {
	background: var(--meetr-summit);
	color: #FFFFFF;
	text-decoration: none;
}

.meetr-booking-help__body {
	margin: 0;
	color: var(--meetr-text-muted);
	font-size: var(--meetr-step--1);
	line-height: 1.5;
}