/**
 * WeekendPass front-end.
 *
 * Scoped under .wdz-pk and built from a small token set so it can be retinted
 * per site without touching structure. Colours are deliberately neutral and
 * inherit the host theme's font — this sits inside somebody else's design.
 */

.wdz-pk {
	--pk-ink: #1a2230;
	--pk-muted: #5d6b7a;
	--pk-line: #dfe5ea;
	--pk-surface: #fff;
	--pk-accent: #0e6b72;
	--pk-accent-ink: #fff;
	--pk-accent-soft: #eef7f7;
	--pk-free: #256b41;   /* 5:1 on the free-day tint */
	--pk-free-bg: #e6f4ec;
	--pk-booked: #a8322e;
	--pk-booked-bg: #f7e6e5;
	--pk-radius: 10px;

	font-family: inherit;
	color: var(--pk-ink);
	width: 100%;
	min-width: 0;
	max-width: 560px;
	margin: 1.5rem 0;
	text-align: left;
	line-height: 1.5;
}

/* A tint of whatever accent the site uses; older browsers keep the flat
   fallback above instead of losing the banner background entirely. */
@supports (background: color-mix(in srgb, red, red)) {
	.wdz-pk, .wdz-pkm { --pk-accent-soft: color-mix(in srgb, var(--pk-accent) 9%, #fff); }
}

.wdz-pk *,
.wdz-pk *::before,
.wdz-pk *::after { box-sizing: border-box; }

/* ---- length picker ---- */

.wdz-pk__heading {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 .6rem;
	letter-spacing: .01em;
}

.wdz-pk__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: .6rem;
}

.wdz-pk__card {
	display: flex;
	flex-direction: column;
	gap: .18rem;
	padding: .85rem .9rem;
	background: var(--pk-surface);
	border: 2px solid var(--pk-line);
	border-radius: var(--pk-radius);
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.wdz-pk__card:hover { border-color: var(--pk-accent); }
.wdz-pk__card:focus-visible { outline: 3px solid var(--pk-accent); outline-offset: 2px; }

.wdz-pk__card.is-active {
	border-color: var(--pk-accent);
	box-shadow: inset 0 0 0 1px var(--pk-accent);
}

.wdz-pk__card-label { font-weight: 700; font-size: .98rem; }
.wdz-pk__card-sub { font-size: .82rem; color: var(--pk-muted); }

/* ---- calendar ---- */

.wdz-pk__cal {
	margin-top: 1.1rem;
	padding: 1rem;
	background: var(--pk-surface);
	border: 1px solid var(--pk-line);
	border-radius: var(--pk-radius);
}

.wdz-pk__hint { margin: 0 0 .8rem; font-size: .88rem; color: var(--pk-muted); }

.wdz-pk__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .7rem;
}

.wdz-pk__month { font-weight: 700; }

.wdz-pk__nav {
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
	border-radius: 6px;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	color: inherit;
}
.wdz-pk__nav:disabled { opacity: .35; cursor: default; }
.wdz-pk__nav:focus-visible { outline: 3px solid var(--pk-accent); outline-offset: 2px; }

/* A month grid has a natural size. Left uncapped, seven equal columns of
   square cells grow with whatever column the picker sits in — on a wide product
   panel that produced a calendar taller than the screen. Cells want to be about
   a thumb wide, so the grid is capped and the head is capped with it to keep the
   month title and arrows aligned to the same edges. */
.wdz-pk__days,
.wdz-pk__cal-head {
	max-width: 25rem;
}

.wdz-pk__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.wdz-pk__dow {
	text-align: center;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--pk-muted);
	padding-bottom: .3rem;
}

.wdz-pk__pad { aspect-ratio: 1; }

.wdz-pk__day {
	aspect-ratio: 1;
	max-height: 3.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
	border-radius: 7px;
	font: inherit;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
	color: inherit;
	cursor: pointer;
	transition: border-color .12s ease, background-color .12s ease;
}

.wdz-pk__day:hover:not(:disabled) { border-color: var(--pk-accent); }
.wdz-pk__day:focus-visible { outline: 3px solid var(--pk-accent); outline-offset: 1px; }
.wdz-pk__day:disabled { cursor: default; }

.wdz-pk__day.is-pending { opacity: .45; }

.wdz-pk__day.is-off { opacity: .3; border-color: transparent; }

.wdz-pk__day.is-free {
	border-color: var(--pk-free);
	background: var(--pk-free-bg);
	color: var(--pk-free);
	font-weight: 700;
}

.wdz-pk__day.is-booked {
	border-color: var(--pk-booked);
	background: var(--pk-booked-bg);
	color: var(--pk-booked);
	text-decoration: line-through;
	opacity: 1;
}

.wdz-pk__day.is-span { background: #dbeee8; border-color: var(--pk-accent); }
@supports (background: color-mix(in srgb, red, red)) {
	.wdz-pk__day.is-span { background: color-mix(in srgb, var(--pk-accent) 26%, #fff); }
}

.wdz-pk__day.is-selected {
	background: var(--pk-accent);
	border-color: var(--pk-accent);
	color: var(--pk-accent-ink);
	font-weight: 700;
	text-decoration: none;
}

/* ---- loading ----
   The availability sweep takes a second or so. Without a visible state the
   customer sees a full month of dead dates and assumes the calendar is broken,
   so the cells shimmer and the message sits above the grid rather than under it. */

.wdz-pk__loading {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .7rem;
	font-size: .85rem;
	color: var(--pk-muted);
}

.wdz-pk__spinner {
	width: .85rem;
	height: .85rem;
	flex: none;
	border: 2px solid var(--pk-line);
	border-top-color: var(--pk-accent);
	border-radius: 50%;
	animation: wdz-pk-spin .7s linear infinite;
}

@keyframes wdz-pk-spin { to { transform: rotate(360deg); } }

/* Dates whose status is not known yet: clearly "not ready", not "not available". */
.wdz-pk__cal.is-loading .wdz-pk__day.is-pending {
	color: transparent;
	border-color: transparent;
	background: var(--pk-line);
	animation: wdz-pk-pulse 1.1s ease-in-out infinite;
}

@keyframes wdz-pk-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }

@media (prefers-reduced-motion: reduce) {
	.wdz-pk__spinner { animation: none; }
	.wdz-pk__cal.is-loading .wdz-pk__day.is-pending { animation: none; opacity: .5; }
}

.wdz-pk__legend {
	display: flex;
	gap: 1rem;
	margin-top: .9rem;
	font-size: .78rem;
	color: var(--pk-muted);
}
.wdz-pk__legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.wdz-pk__swatch {
	width: .8rem;
	height: .8rem;
	border-radius: 3px;
	border: 1px solid currentColor;
	display: inline-block;
}
.wdz-pk__swatch.is-free { background: var(--pk-free-bg); color: var(--pk-free); }
.wdz-pk__swatch.is-booked { background: var(--pk-booked-bg); color: var(--pk-booked); }

/* ---- quote ---- */

.wdz-pk__quote {
	margin-top: 1rem;
	padding: 1rem;
	border-radius: var(--pk-radius);
	border: 1px solid var(--pk-line);
	background: var(--pk-surface);
}

.wdz-pk__quote.is-ok { border-color: var(--pk-free); background: var(--pk-free-bg); }
.wdz-pk__quote.is-taken { border-color: var(--pk-booked); background: var(--pk-booked-bg); }
.wdz-pk__quote.is-unknown { border-color: var(--pk-line); }

.wdz-pk__quote-line {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .8rem;
	align-items: baseline;
	justify-content: space-between;
}
.wdz-pk__quote-line + .wdz-pk__quote-line { margin-top: .45rem; }

.wdz-pk__quote-label {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pk-muted);
}
.wdz-pk__quote-range { font-weight: 600; }
.wdz-pk__quote-title { display: block; margin-bottom: .25rem; }
.wdz-pk__quote-msg { margin: 0; font-size: .9rem; }
.wdz-pk__price { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.wdz-pk__book {
	display: block;
	width: 100%;
	margin-top: .9rem;
	padding: .8rem 1rem;
	background: var(--pk-cta, var(--pk-accent));
	color: var(--pk-cta-ink, var(--pk-accent-ink));
	border: 0;
	border-radius: var(--pk-btn-radius, 8px);
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
}
.wdz-pk__book:hover { filter: brightness(1.08); }
.wdz-pk__book:focus-visible { outline: 3px solid var(--pk-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.wdz-pk *, .wdz-pk *::before, .wdz-pk *::after { transition: none !important; }
}

/* ---- length cards: price, window, selected state ---- */

/* Name above, price beneath. Sharing a line meant the price either fought the
   name for room or escaped a narrow card entirely; stacking is predictable at
   every width and reads like a price on a product. */
.wdz-pk__card-head {
	display: block;
	width: 100%;
	min-width: 0;
}

.wdz-pk__card-label { display: block; min-width: 0; overflow-wrap: anywhere; }
.wdz-pk__card-price { display: block; margin-top: .1rem; }


.wdz-pk__card-price {
	font-weight: 800;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	color: var(--pk-accent-text, var(--pk-accent));
	white-space: nowrap;
}

.wdz-pk__card-window {
	font-size: .76rem;
	color: var(--pk-muted);
	font-variant-numeric: tabular-nums;
}

.wdz-pk__card.is-active {
	background: var(--pk-accent);
	border-color: var(--pk-accent);
	color: var(--pk-accent-ink);
	box-shadow: none;
}
.wdz-pk__card.is-active .wdz-pk__card-sub,
.wdz-pk__card.is-active .wdz-pk__card-window { color: var(--pk-accent-ink); opacity: .86; }
.wdz-pk__card.is-active .wdz-pk__card-price { color: var(--pk-accent-ink); }

.wdz-pk__card-pill {
	align-self: flex-start;
	margin-top: .35rem;
	padding: .15em .6em;
	border-radius: 999px;
	background: rgba(255, 255, 255, .24);
	color: var(--pk-accent-ink);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.wdz-pk__banner {
	margin: .8rem 0 0;
	padding: .7rem .85rem;
	background: var(--pk-accent-soft);
	border: 1px solid var(--pk-accent);
	border-radius: 8px;
	font-size: .88rem;
	color: var(--pk-ink);
}

/* ---- start / end time pickers ---- */

.wdz-pk__times {
	margin-top: .9rem;
	padding: .9rem 1rem;
	background: var(--pk-surface);
	border: 1px solid var(--pk-line);
	border-radius: var(--pk-radius);
	display: flex;
	flex-wrap: wrap;
	gap: .7rem 1.4rem;
}

.wdz-pk__time-row { display: flex; align-items: center; gap: .55rem; }

.wdz-pk__time-label {
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--pk-muted);
}

.wdz-pk__time-select {
	font: inherit;
	font-size: .9rem;
	padding: .35rem .5rem;
	border: 1px solid var(--pk-line);
	border-radius: 6px;
	background: var(--pk-surface);
	color: inherit;
}
.wdz-pk__time-select:focus-visible { outline: 3px solid var(--pk-accent); outline-offset: 1px; }

/* ---- collapsed summary after booking ---- */

.wdz-pk__summary { margin-bottom: .2rem; }

.wdz-pk__summary-chip {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .8rem;
	padding: .85rem 1rem;
	background: var(--pk-surface);
	border: 2px solid var(--pk-accent);
	border-radius: var(--pk-radius);
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.wdz-pk__summary-chip:focus-visible { outline: 3px solid var(--pk-accent); outline-offset: 2px; }

.wdz-pk__summary-name {
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--pk-accent-text, var(--pk-accent));
}
.wdz-pk__summary-range { font-weight: 600; font-variant-numeric: tabular-nums; }
.wdz-pk__summary-change {
	margin-left: auto;
	font-size: .8rem;
	font-weight: 700;
	color: var(--pk-accent-text, var(--pk-accent));
	text-decoration: underline;
}

/* Two cards side by side leaves ~140px each on a phone, which clips the price.
   One per row below this width instead. */
@media (max-width: 30rem) {
	.wdz-pk__grid { grid-template-columns: 1fr; }
}

/* ---- listing-page dialog ----
   On a category page each card opens the picker here instead of inline, so a
   customer can choose a length and date without leaving the grid. */

.wdz-pkm {
	position: fixed;
	inset: 0;
	z-index: 2147483100;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 4vh 1rem;
	background: rgba(12, 22, 30, .55);
	overflow-y: auto;
}
.wdz-pkm[hidden] { display: none; }

.wdz-pkm__panel {
	width: min(600px, 100%);
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(12, 22, 30, .3);
	padding: 1.1rem 1.2rem 1.4rem;
	max-height: 92vh;
	overflow-y: auto;
}

.wdz-pkm__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding-bottom: .6rem;
	margin-bottom: .4rem;
	border-bottom: 1px solid #dfe5ea;
}

.wdz-pkm__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
	color: #14202b;
	line-height: 1.2;
}

.wdz-pkm__close {
	flex: none;
	width: 44px;   /* touch target */
	height: 44px;
	border-radius: 50%;
	border: 1px solid #dfe5ea;
	background: #fff;
	color: #14202b;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}
.wdz-pkm__close:focus-visible { outline: 3px solid var(--pk-accent, #0e6b72); outline-offset: 2px; }

.wdz-pkm .wdz-pk { margin: 0; max-width: none; }

body.wdz-pkm-open { overflow: hidden; }

/* ---- pages this picker owns ----
   The demo site also runs our other products, whose floating widgets sit over
   the cards on a phone. They stand down on the item pages the picker is scoped
   to and stay live everywhere else on the site. */

body.wdz-pk-focus #wdz-frontdesk-root,
body.wdz-pk-focus .wdz-sticky-cta {
	display: none !important;
}

/* The site's own date popup stands down where the picker takes the date
   (see standDownDateGate in the script, which also covers browsers without :has). */
/* Out of sight and out of reach, but NOT display:none: Elementor closes a
   popup with a jQuery fade, which does nothing to an element it already
   thinks is hidden — the close never finishes and the popup's keyboard trap
   stays on, leaving Tab dead on the page. The script closes it properly. */
body.wdz-pk-nogate .wdz-pk-gate {
	visibility: hidden !important;
	pointer-events: none !important;
}
/* Its own rule: a browser without :has() drops the whole selector list, which
   would take the class-based rule above down with it. */
body.wdz-pk-nogate .elementor-popup-modal:has([name*="io_popup_start_date"]) {
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ---- sitting inside the platform's product panel ----
   The panel is narrower than three cards side by side, so they stack; and the
   platform's own price line and add button are taken out of sight there because
   the picker now answers both. They stay in the render tree so the picker can
   still read their labels and click them. */

#wdz-packages-root.is-narrow .wdz-pk__grid {
	grid-template-columns: 1fr;
}

#wdz-packages-root {
	max-width: 100%;
}

.wdz-pk-standdown {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---- polish ----
   The quote panel is hidden until a date is chosen (see renderQuote); belt and
   braces here so an empty one can never draw a border. And on a wide product
   panel the calendar keeps its natural width rather than stretching, so the
   card row above it is not left looking detached from it. */

.wdz-pk__quote[hidden] { display: none !important; }

/* Centred rather than pinned left: in the dialog and in a wide product panel a
   left-aligned calendar leaves an obvious hole down the right-hand side. */
.wdz-pk__cal { max-width: 30rem; margin-inline: auto; }
.wdz-pk__days, .wdz-pk__cal-head { margin-inline: auto; }

/* Card summary lines read better without an orphaned "AM" on its own row. */
.wdz-pk__card-window { text-wrap: balance; }

/* Screen-reader-only status line for loading and quote changes. */
.wdz-pk__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Items with a required option (Gulf Coast's combo banners), 1.6.9 */
.wdz-pk__opt-note {
	margin: 0 0 .75rem;
	padding: .65rem .8rem;
	border: 1px solid #e0a43a;
	border-radius: var(--pk-radius, 10px);
	background: #fff6e5;
	color: #4a3200;
	font-weight: 600;
	line-height: 1.4;
}
.wdz-pk-opt-ask {
	outline: 3px solid var(--pk-cta, #e0a43a);
	outline-offset: 6px;
	border-radius: 6px;
}
.wdz-pk-opt-on .io_access_button {
	border: 3px solid var(--pk-accent-text, #0e6b72) !important;
	box-shadow: 0 0 0 2px #fff;
}
.wdz-pk-opt-on .accTextName {
	font-weight: 700;
}
.io_access_button:focus-visible {
	outline: 3px solid var(--pk-accent-text, #0e6b72);
	outline-offset: 2px;
}

/* The platform's Check Delivery stays, but as a secondary action beside "Book", 1.6.10 */
.wdz-pk-native-soft,
.io_product_infobox a.wdz-pk-native-soft.elementor-button {
	background: transparent !important;
	color: var(--pk-accent-text, #0e6b72) !important;
	border: 2px solid currentColor !important;
	box-shadow: none !important;
}
.wdz-pk-native-soft:hover,
.wdz-pk-native-soft:focus-visible {
	background: var(--pk-accent-soft, #e6f4f1) !important;
}