/**
 * Printeez Calendly block — the first-party inline placeholder, plus front-end
 * overrides layered on Calendly's own widget.css.
 *
 * This sheet no longer declares the vendor stylesheet as a WordPress
 * dependency: Calendly is user-requested, so the vendor sheet arrives at click
 * time through `assets/vendor-loaders.js`, which inserts it BEFORE this one so
 * the overrides below still win on equal specificity.
 *
 * The placeholder rules are first-party only and apply before any vendor asset
 * exists — that is the point of them.
 */

/* The inline placeholder: what stands in for the vendor's iframe until the
 * visitor asks for it. Sized by the block's own height attribute, so asking
 * for the calendar does not shift the page. Drawn as the widget's card in the
 * block's colours (--ps-calendly-bg / -text / -primary, set inline by the
 * server) with a decorative month behind a blurred overlay; the overlay holds
 * the one real control. */
.ps-calendly-placeholder {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	padding: 2rem 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	background: var(--ps-calendly-bg, #fff);
	color: var(--ps-calendly-text, #1a1a1a);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
}

.ps-calendly-placeholder--loaded {
	display: block;
	padding: 0;
	border: 0;
	box-shadow: none;
	overflow: visible;
}

/* The decorative calendar. Matches the vendor's own proportions closely
 * enough that the swap on click reads as the same card coming to life. */
.ps-calendly-placeholder__calendar {
	max-width: 26rem;
	margin: 0 auto;
	text-align: center;
	user-select: none;
	pointer-events: none;
}

.ps-calendly-placeholder__title {
	margin: 0 0 1.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.ps-calendly-placeholder__month {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	margin: 0 0 1.25rem;
	font-size: 1rem;
	font-weight: 700;
}

.ps-calendly-placeholder__arrow {
	font-size: 1.5rem;
	line-height: 1;
	opacity: 0.45;
}

.ps-calendly-placeholder__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.5rem 0.25rem;
}

.ps-calendly-placeholder__weekday {
	font-size: 0.75rem;
	font-weight: 700;
	opacity: 0.7;
}

.ps-calendly-placeholder__day {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	font-size: 1rem;
	opacity: 0.6;
}

/* Today is the only fact the dummy asserts: a dot under the date, as the
 * vendor draws it. Availability is never implied. */
.ps-calendly-placeholder__day--today::after {
	content: "";
	position: absolute;
	bottom: 0.15rem;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 9999px;
	background: currentColor;
}

/* The overlay blurs the dummy and carries the control. Without backdrop
 * support the tint alone still separates the dummy from a real calendar. */
.ps-calendly-placeholder__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

@supports not (backdrop-filter: blur(4px)) {
	.ps-calendly-placeholder__overlay {
		background: rgba(255, 255, 255, 0.75);
	}
}

.ps-calendly-placeholder__button {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: 0.85em 1.75em;
	border: 0;
	border-radius: 9999px;
	background: var(--ps-calendly-primary, #b39872);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.ps-calendly-placeholder__button:hover {
	filter: brightness(0.95);
}

.ps-calendly-placeholder__button:focus-visible {
	outline: 2px solid var(--ps-calendly-text, #1a1a1a);
	outline-offset: 3px;
}

.ps-calendly-placeholder__button[disabled] {
	cursor: progress;
	opacity: 0.6;
}

/* The failure path swaps the button for a link to the same event (see
 * calendly-view.js); keep it legible over the tint. */
.ps-calendly-placeholder--failed .ps-calendly-placeholder__overlay {
	background: rgba(255, 255, 255, 0.85);
}

/* Lock the page behind the popup. Calendly's overlay is position:fixed with
 * overflow:hidden, but it never locks body scroll, so the document scrollbar
 * stays visible at the viewport edge while the scheduler is open. Standard
 * modal behavior; the overlay element exists only while the popup is open. */
body:has(.calendly-overlay) {
	overflow: hidden;
}

/* The vendor caps the popup panel at 700px (with !important) regardless of
 * viewport height, so on a tall screen the booking page scrolls inside the
 * iframe. Let the panel use the vendor's own 90% height instead. The vendor's
 * below-975px rule (full-screen panel, no cap) is untouched. */
.calendly-overlay .calendly-popup {
	max-height: 90vh !important;
	height: 90vh !important;
}