/* ==========================================================================
   Booking Widget Preloader
   Shows a skeleton animation from first paint while the booking widget
   initializes and fetches pricing data from the API.

   How it works:
   1. CSS overrides the inline display:none on .widget-loader so the
      skeleton is visible the moment the browser paints the element.
   2. If the SVG skeleton failed to load (broken path, HRCK template
      override, etc.), a CSS-only skeleton fills in with shimmer.
   3. When HomeRunner's JS finishes loading and shows the widget body,
      the :has() selector detects the change and hides the skeleton.
   ========================================================================== */

/* 1. Show the loader from first paint (override inline display:none) */
.homelocal-booking-widget .widget-loader {
	display: block !important;
	/* Match the widget body's internal padding so the skeleton aligns
	   with the actual content. Override with --hrck-widget-padding. */
	padding: var(--hrck-widget-padding, 15px);
	box-sizing: border-box;
}

/* 2. Hide the loader once the widget body is no longer display:none.
      jQuery .show() removes the inline display:none, so [style*="display:none"]
      and [style*="display: none"] no longer match. */
.homelocal-booking-widget:has(
	.homelocal-booking-widget-body:not([style*="display:none"]):not([style*="display: none"])
) .widget-loader {
	display: none !important;
}

/* 3. CSS skeleton fallback — fills in when the SVG content is missing */
.homelocal-booking-widget .widget-loader:not(:has(svg)) {
	min-height: 180px;
	position: relative;
	overflow: hidden;
}

/* Skeleton shapes: price label, date inputs, guests row, book button */
.homelocal-booking-widget .widget-loader:not(:has(svg))::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		/* Price label */
		linear-gradient(var(--hrck-skel, #ece7dd), var(--hrck-skel, #ece7dd))
			0 0 / 40% 14px no-repeat,
		/* Check-in input */
		linear-gradient(var(--hrck-skel, #ece7dd), var(--hrck-skel, #ece7dd))
			0 30px / 48% 36px no-repeat,
		/* Check-out input */
		linear-gradient(var(--hrck-skel, #ece7dd), var(--hrck-skel, #ece7dd))
			52% 30px / 48% 36px no-repeat,
		/* Guests dropdown */
		linear-gradient(var(--hrck-skel, #ece7dd), var(--hrck-skel, #ece7dd))
			0 82px / 100% 36px no-repeat,
		/* Book Now button */
		linear-gradient(var(--hrck-skel, #ece7dd), var(--hrck-skel, #ece7dd))
			0 136px / 100% 44px no-repeat;
	border-radius: 4px;
}

/* Shimmer pass — translucent white bar sweeping left-to-right */
.homelocal-booking-widget .widget-loader:not(:has(svg))::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.45) 50%,
		transparent 100%
	);
	background-size: 50% 100%;
	background-repeat: no-repeat;
	animation: hrckWidgetShimmer 1.8s ease-in-out infinite;
}

@keyframes hrckWidgetShimmer {
	0%   { background-position: -50% 0; }
	100% { background-position: 150% 0; }
}

/* 4. When the SVG IS present, ensure it's visible and fills the space */
.homelocal-booking-widget .widget-loader:has(svg) svg {
	display: block;
	width: 100%;
	height: auto;
}