/**
 * Timeline booking-resizing presentation.
 *
 * Pointer preview and canonical Review remain non-mutating. Apply is visibly
 * unavailable in this phase. Every selector is scoped to the Timeline card host.
 *
 * @package Booking Calendar
 * @since   12.0.0
 */

.wpbc_timeline_page .wpbc_timeline_booking_resize__host {
	display: block;
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 4;
}

/*
 * Loading markers share the selected card's boundary coordinates. Lift only
 * their inert layer above Timeline's selection chrome and hide its ordinary
 * dots while the request is pending. Ready handles also sit above the chrome
 * so their opaque centers mask its vertical border. The accessory dock remains
 * one layer higher, preserving information and other control clicks. At each
 * authorized boundary, the ready handle replaces Timeline's ordinary selection
 * dot. An unavailable boundary retains no button and converts that dot into a
 * non-interactive red X marker.
 */
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-loading .wpbc_timeline_booking_resize__host {
	z-index: 10;
}

.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-ready .wpbc_timeline_booking_resize__host {
	z-index: 10;
}

.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-ready .wpbc_timeline__booking_accessory_dock {
	z-index: 11;
}

/*
 * Elevate only the active pointer preview. This keeps its duration badge above
 * the canonical card, resize handles, attached control rail, and overlapping
 * booking cards without changing normal Timeline stacking or hit testing.
 */
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resizing {
	z-index: 13;
}

.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resizing .wpbc_timeline_booking_resize__host {
	z-index: 12;
}

/*
 * Pointer capture keeps the transparent handle button alive during movement.
 * Hide inactive dots and every large ready ring once the dashed ghost owns the
 * boundary, but retain the active handle's small dot at the moving edge. Restore
 * both authorized handles after release for a follow-up local adjustment.
 */
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-dragging .wpbc_timeline__booking_selection_dot,
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-dragging .wpbc_timeline_booking_resize__idle_dot,
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-dragging .wpbc_timeline_booking_resize__ready_ring {
	opacity: 0;
	visibility: hidden;
}

.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-dragging .wpbc_timeline_booking_resize__handle.is-booking-resize-active-boundary .wpbc_timeline_booking_resize__idle_dot {
	opacity: 1;
	visibility: visible;
}

/* Keep pointer feedback explicit while capture auto-scrolls across the canvas. */
.wpbc_timeline_page .wpbc_timeline__mount.is-booking-resize-pointer-active,
.wpbc_timeline_page .wpbc_timeline__mount.is-booking-resize-pointer-active * {
	cursor: ew-resize;
}

.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-loading .wpbc_timeline__booking_selection_dot {
	visibility: hidden;
}

.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-start-ready .wpbc_timeline__booking_selection_dot--start,
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-end-ready .wpbc_timeline__booking_selection_dot--end {
	visibility: hidden;
}

/*
 * A partially eligible booking must not present an ordinary blue edge dot as
 * though it were another draggable handle. The red ring plus crossed strokes
 * communicate unavailability without relying on color alone. These markers
 * remain inside Timeline's aria-hidden selection chrome; the polite live region
 * announces the equivalent state to assistive technology.
 */
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-start-unavailable .wpbc_timeline__booking_selection_dot--start,
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-end-unavailable .wpbc_timeline__booking_selection_dot--end {
	background: #fff;
	block-size: 12px;
	border-color: #d63638;
	color: #d63638;
	inline-size: 12px;
}

.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-start-unavailable .wpbc_timeline__booking_selection_dot--start::before,
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-start-unavailable .wpbc_timeline__booking_selection_dot--start::after,
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-end-unavailable .wpbc_timeline__booking_selection_dot--end::before,
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-end-unavailable .wpbc_timeline__booking_selection_dot--end::after {
	background: currentColor;
	block-size: 1.5px;
	border-radius: 1px;
	content: "";
	inline-size: 6px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}

.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-start-unavailable .wpbc_timeline__booking_selection_dot--start::after,
.wpbc_timeline_page .wpbc_timeline__booking_segment.is-booking-resize-end-unavailable .wpbc_timeline__booking_selection_dot--end::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/*
 * Timeline selects every visible occurrence of one booking. A server denial
 * removes resize affordance dots from that selected set while preserving the
 * selection outline and badge. The controller toggles this mount state once;
 * it does not scan or rewrite occurrence cards.
 */
.wpbc_timeline_page .wpbc_timeline__mount.is-booking-resize-denied .wpbc_timeline__booking_segment.is-booking-selected .wpbc_timeline__booking_selection_dot {
	visibility: hidden;
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__host > [data-wpbc-timeline-booking-resize-visual-host],
.wpbc_timeline_page .wpbc_timeline_booking_resize__loading,
.wpbc_timeline_page .wpbc_timeline_booking_resize__handles {
	display: block;
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/*
 * Keep drag-time controls above the dashed proposal. Both layers live in the
 * selected card's dedicated resize host, and the ghost is appended
 * after the visual host. Explicit internal tiers prevent DOM order from
 * painting a dashed boundary through an idle dot or expanded ready ring.
 */
.wpbc_timeline_page .wpbc_timeline_booking_resize__host > [data-wpbc-timeline-booking-resize-visual-host] {
	z-index: 2;
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__loading_marker {
	animation: wpbc_timeline_booking_resize_loading_pulse 250ms ease-in-out infinite alternate;
	background: var(--wp-admin-theme-color, #3858e9);
	block-size: 7px;
	border-radius: 50%;
	inline-size: 7px;
	inset-block-start: 50%;
	position: absolute;
	transform: translateY(-50%);
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__loading_marker--start {
	inset-inline-start: -2.5px;
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__loading_marker--end {
	inset-inline-end: -2.5px;
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__handle {
	align-items: center;
	appearance: none;
	background: transparent;
	block-size: 44px;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	color: var(--wp-admin-theme-color, #3858e9);
	cursor: ew-resize;
	display: flex;
	inline-size: 44px;
	inset-block-start: 50%;
	justify-content: center;
	margin: 0;
	min-block-size: 44px;
	min-inline-size: 44px;
	padding: 0;
	pointer-events: auto;
	position: absolute;
	transform: translateY(-50%);
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__handle--start {
	/* Center on the inner half of Timeline's 2px logical-start border. */
	inset-inline-start: -21px;
	transform: translate3d(var(--wpbc-timeline-booking-resize-start-offset, 0px), -50%, 0);
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__handle--end {
	/* Center on the inner half of Timeline's 2px logical-end border. */
	inset-inline-end: -21px;
	transform: translate3d(var(--wpbc-timeline-booking-resize-end-offset, 0px), -50%, 0);
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__handle:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor;
	outline: 2px solid transparent;
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__idle_dot {
	background: #fff;
	block-size: 10px;
	border: 2px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
	inline-size: 10px;
	position: absolute;
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__ready_ring {
	animation: wpbc_timeline_booking_resize_ready_pulse 420ms ease-in-out 1;
	background: #fff;
	block-size: 26px;
	border: 2px solid currentColor;
	border-radius: 50%;
	box-sizing: border-box;
	inline-size: 26px;
	opacity: 0;
	position: absolute;
	transform: scale(0.72);
	transition: opacity 120ms ease, transform 120ms ease;
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__handle:hover .wpbc_timeline_booking_resize__ready_ring,
.wpbc_timeline_page .wpbc_timeline_booking_resize__handle:focus-visible .wpbc_timeline_booking_resize__ready_ring {
	opacity: 1;
	transform: scale(1);
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__ghost {
	align-items: center;
	background: rgba( 56, 88, 233, 0.07 );
	border: 2px dashed var(--wp-admin-theme-color, #3858e9);
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	min-block-size: 44px;
	pointer-events: none;
	position: absolute;
	z-index: auto;
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__ghost_host {
	display: block;
	inset: 0;
	overflow: visible;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__handle {
	touch-action: pan-y;
}

.wpbc_timeline_page .wpbc_timeline_booking_resize__ghost_duration {
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.12 );
	flex: 0 0 auto;
	font-weight: 600;
	inset-inline: 12px;
	padding: 4px 10px;
	position: sticky;
	white-space: nowrap;
	z-index: 2;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review {
	align-items: stretch;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	box-sizing: border-box;
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.14 );
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	/* JavaScript also caps this preferred width to the visible Timeline canvas. */
	inline-size: min( 580px, var(--wpbc-timeline-booking-resize-review-max-inline-size, calc(100vw - 32px)) );
	justify-content: space-between;
	max-block-size: calc(100vh - 16px);
	max-inline-size: min( 580px, var(--wpbc-timeline-booking-resize-review-max-inline-size, calc(100vw - 32px)) );
	overflow: auto;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review--busy {
	inline-size: min( 560px, var(--wpbc-timeline-booking-resize-review-max-inline-size, calc(100vw - 32px)) );
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review--error,
.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review--refresh_error {
	inline-size: min( 580px, var(--wpbc-timeline-booking-resize-review-max-inline-size, calc(100vw - 32px)) );
}

.wpbc_timeline_booking_resize__review_portal {
	display: block;
	inset: auto;
	pointer-events: auto;
	position: fixed;
	z-index: 120;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_spinner {
	animation: wpbc_timeline_booking_resize_review_spin 700ms linear infinite;
	block-size: 16px;
	border: 2px solid #c3c4c7;
	border-block-start-color: var(--wp-admin-theme-color, #3858e9);
	border-radius: 50%;
	box-sizing: border-box;
	flex: 0 0 auto;
	inline-size: 16px;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review--busy .wpbc_timeline_booking_resize__review_summary {
	align-items: center;
	flex-direction: row;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_error {
	color: #b32d2e;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_summary,
.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_actions {
	align-items: flex-start;
	display: flex;
	gap: 8px;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_summary {
	flex: 1 1 auto;
	flex-direction: column;
	min-inline-size: 0;
	padding: 16px;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_period_comparison {
	align-items: center;
	display: flex;
	flex: 1 1 100%;
	flex-flow: row nowrap;
	gap: 16px;
	inline-size: 100%;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_period {
	display: flex;
	flex: 1 1 220px;
	flex-direction: column;
	gap: 3px;
	min-inline-size: 0;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_period_transition {
	align-items: center;
	display: flex;
	flex: 1 1 248px;
	gap: 8px;
	min-inline-size: 0;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_period_transition > .wpbc_timeline_booking_resize__review_period {
	flex: 1 1 auto;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_period_label {
	color: #646970;
	font-size: 12px;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_period_parts {
	overflow-wrap: anywhere;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_period_part.is-previous-changed {
	color: #b32d2e;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_period_part.is-changed {
	color: #008a20;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_period_transition > .wpbc_icn_arrow_forward {
	flex: 0 0 auto;
	font-size: 18px;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_actions {
	align-items: stretch;
	border-inline-start: 1px solid #dcdcde;
	box-sizing: border-box;
	flex: 0 1 180px;
	flex-direction: column;
	flex-wrap: nowrap;
	inline-size: 180px;
	justify-content: center;
	max-inline-size: 180px;
	min-inline-size: 140px;
	padding: 12px;
	white-space: normal;
}

.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_actions .button {
	align-items: center;
	display: inline-flex;
	inline-size: 100%;
	justify-content: center;
	line-height: 1.75;
	margin: 0;
	min-block-size: 0;
	overflow-wrap: anywhere;
	padding: 4px 6px;
	text-align: center;
	white-space: normal;
}

@keyframes wpbc_timeline_booking_resize_loading_pulse {
	from {
		opacity: 0.42;
		transform: translateY(-50%) scale(0.82);
	}

	to {
		opacity: 1;
		transform: translateY(-50%) scale(1.08);
	}
}

@keyframes wpbc_timeline_booking_resize_ready_pulse {
	0%,
	100% {
		opacity: 0;
		transform: scale(0.72);
	}

	45% {
		opacity: 1;
		transform: scale(1.12);
	}
}

@keyframes wpbc_timeline_booking_resize_review_spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wpbc_timeline_page .wpbc_timeline_booking_resize__loading_marker,
	.wpbc_timeline_page .wpbc_timeline_booking_resize__ready_ring,
	.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_spinner {
		animation: none;
		transition: none;
	}
}

@media (max-width: 782px) {
	.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review {
		flex-direction: column;
	}

	.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_period_comparison {
		align-items: stretch;
		flex-direction: column;
		gap: 8px;
	}

	.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_actions {
		border-block-start: 1px solid #dcdcde;
		border-inline-start: 0;
		box-sizing: border-box;
		flex: 0 0 auto;
		flex-direction: row;
		inline-size: 100%;
		max-inline-size: none;
		min-inline-size: 0;
		padding: 12px 16px;
	}

	.wpbc_timeline_booking_resize__review_portal .wpbc_timeline_booking_resize__review_actions .button {
		flex: 1 1 50%;
	}
}