/* ==========================================================================
   WeStyle shop filters: sidebar (≥992px), bottom sheet (<992px),
   jQuery UI datepicker skin, noUiSlider skin. Tokens only.
   ========================================================================== */

/* ---------- Sidebar / sheet container ---------- */
.ws-filters {
	font-family: var(--ws-font-body);
	color: var(--ws-ink);
}

.ws-filters__head,
.ws-filters__foot {
	display: none;
}

@media (min-width: 992px) {
	.ws-filters {
		position: sticky;
		top: calc(var(--ws-shop-sticky-top, 0px) + var(--ws-space-4));
		max-height: calc(100vh - var(--ws-shop-sticky-top, 0px) - 32px);
		overflow-y: auto;
		padding: var(--ws-space-5);
		border: 1px solid var(--ws-line);
		border-radius: var(--ws-radius-lg);
		background: var(--ws-bg);
		scrollbar-width: thin;
	}

	.ws-filters-backdrop {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.ws-filters {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9990;
		display: flex;
		flex-direction: column;
		max-height: 88vh;
		max-height: 88dvh;
		border-radius: var(--ws-radius-lg) var(--ws-radius-lg) 0 0;
		background: var(--ws-bg);
		box-shadow: var(--ws-shadow-lg);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform 280ms var(--ws-ease), visibility 0s linear 280ms;
	}

	body.ws-filters-open .ws-filters {
		transform: translateY(0);
		visibility: visible;
		transition: transform 280ms var(--ws-ease);
	}

	body.ws-filters-open {
		overflow: hidden;
	}

	.ws-filters__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--ws-space-2) var(--ws-space-2) var(--ws-space-2) var(--ws-space-5);
		border-bottom: 1px solid var(--ws-line);
	}

	.ws-filters__head::before {
		content: "";
		position: absolute;
		top: 6px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: var(--ws-radius-pill);
		background: var(--ws-line);
	}

	.ws-filters__title {
		margin: 0;
		font-family: var(--ws-font-display);
		font-size: var(--ws-fs-xl);
		font-weight: 600;
		color: var(--ws-ink);
	}

	.ws-filters__close {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: transparent;
		color: var(--ws-ink);
		cursor: pointer;
	}

	.ws-filters__close:hover,
	.ws-filters__close:focus {
		background: var(--ws-cream);
		color: var(--ws-ink);
	}

	.ws-filters__body {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--ws-space-4) var(--ws-space-5);
	}

	.ws-filters__foot {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: var(--ws-space-2);
		padding: var(--ws-space-3) var(--ws-space-5) calc(var(--ws-space-3) + env(safe-area-inset-bottom));
		border-top: 1px solid var(--ws-line);
		background: var(--ws-bg);
	}

	.ws-filters__foot .ws-btn {
		padding: 0 var(--ws-space-3);
		white-space: nowrap;
	}

	.ws-filters-backdrop {
		position: fixed;
		inset: 0;
		z-index: 9989;
		background: rgba(33, 26, 23, 0.45);
	}

	.ws-filters-backdrop[hidden] {
		display: none;
	}

	/* Sheet has its own footer buttons. */
	.ws-filters .crf-actions {
		display: none;
	}
}

/* ---------- Form ---------- */
.crf-form {
	display: flex;
	flex-direction: column;
	gap: var(--ws-space-5);
	margin: 0;
}

.crf-section {
	min-width: 0;
	margin: 0;
	padding: 0 0 var(--ws-space-5);
	border: 0;
	border-bottom: 1px solid var(--ws-line);
}

.crf-section:last-of-type {
	padding-bottom: 0;
	border-bottom: 0;
}

.crf-heading {
	display: block;
	width: 100%;
	margin: 0 0 var(--ws-space-3);
	padding: 0;
	color: var(--ws-ink);
	font-family: var(--ws-font-body);
	font-size: var(--ws-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.crf-hint {
	margin: 0 0 var(--ws-space-3);
	color: var(--ws-ink-soft);
	font-size: var(--ws-fs-xs);
	line-height: 1.5;
}

/* Dates */
.crf-date-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ws-space-2);
}

.crf-date-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.crf-date-group label {
	color: var(--ws-muted);
	font-size: var(--ws-fs-xs);
	font-weight: 500;
}

.crf-form .crf-date {
	width: 100%;
	min-height: 44px;
	padding: 0 var(--ws-space-3) 0 34px;
	border: 1px solid var(--ws-line);
	border-radius: var(--ws-radius);
	background: var(--ws-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b8925a' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9.5h18M8 3v3M16 3v3'/%3E%3C/svg%3E") no-repeat 11px center;
	color: var(--ws-ink);
	font: 500 var(--ws-fs-sm)/1.2 var(--ws-font-body);
	cursor: pointer;
	transition: border-color var(--ws-dur) var(--ws-ease), box-shadow var(--ws-dur) var(--ws-ease);
}

.crf-form .crf-date::placeholder {
	color: var(--ws-muted);
	font-weight: 400;
}

.crf-form .crf-date:focus {
	border-color: var(--ws-rose);
	outline: none;
	box-shadow: 0 0 0 3px var(--ws-rose-tint);
}

.crf-show-booked {
	margin-top: var(--ws-space-2);
}

/* Occasion list */
.crf-options {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.crf-checkbox,
.crf-occasion-link {
	display: flex;
	align-items: center;
	gap: var(--ws-space-3);
	min-height: 44px;
	margin: 0;
	color: var(--ws-ink-soft);
	font-size: var(--ws-fs-sm);
	text-decoration: none;
	cursor: pointer;
}

.crf-checkbox:hover,
.crf-occasion-link:hover {
	color: var(--ws-ink);
}

.crf-checkbox input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--ws-rose);
	cursor: pointer;
}

.crf-show-booked {
	min-height: 44px;
	font-size: var(--ws-fs-xs);
}

.crf-checkbox.is-empty {
	color: var(--ws-muted);
}

.crf-occasion-link {
	padding: 0 var(--ws-space-3);
	border-radius: var(--ws-radius-sm);
}

.crf-occasion-link.is-current {
	background: var(--ws-rose-tint);
	color: var(--ws-rose-deep);
	font-weight: 600;
}

.crf-count {
	margin-left: auto;
	color: var(--ws-muted);
	font-size: var(--ws-fs-xs);
}

/* Size chips */
.crf-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ws-space-2);
}

.crf-size-chip {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.crf-size-chip input,
.crf-color-swatch input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.crf-size-chip span {
	display: inline-grid;
	place-items: center;
	min-width: 48px;
	height: 44px;
	padding: 0 var(--ws-space-3);
	border: 1px solid var(--ws-line);
	border-radius: var(--ws-radius);
	background: var(--ws-bg);
	color: var(--ws-ink);
	font-size: var(--ws-fs-sm);
	font-weight: 500;
	transition: border-color var(--ws-dur) var(--ws-ease), background var(--ws-dur) var(--ws-ease), color var(--ws-dur) var(--ws-ease);
}

.crf-size-chip:hover span {
	border-color: var(--ws-ink);
}

.crf-size-chip input:checked + span {
	border-color: var(--ws-ink);
	background: var(--ws-ink);
	color: var(--ws-bg);
}

.crf-size-chip input:focus-visible + span,
.crf-color-swatch input:focus-visible + .crf-color-dot {
	outline: 2px solid var(--ws-rose);
	outline-offset: 2px;
}

/* Colour swatches */
.crf-colors {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: var(--ws-space-2) var(--ws-space-1);
}

.crf-color-swatch {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	margin: 0;
	cursor: pointer;
}

.crf-color-dot {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--swatch, var(--ws-line));
	box-shadow: inset 0 0 0 1px rgba(33, 26, 23, 0.12);
	transition: box-shadow var(--ws-dur) var(--ws-ease);
}

.crf-color-swatch:hover .crf-color-dot {
	box-shadow: inset 0 0 0 1px rgba(33, 26, 23, 0.12), 0 0 0 2px var(--ws-bg), 0 0 0 3px var(--ws-line);
}

.crf-color-swatch input:checked + .crf-color-dot {
	box-shadow: inset 0 0 0 1px rgba(33, 26, 23, 0.12), 0 0 0 2px var(--ws-bg), 0 0 0 4px var(--ws-rose);
}

.crf-color-name {
	color: var(--ws-ink-soft);
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
}

.crf-color-swatch input:checked ~ .crf-color-name {
	color: var(--ws-ink);
	font-weight: 600;
}

/* Price */
.crf-price-slider {
	margin: var(--ws-space-4) 11px var(--ws-space-4);
}

.crf-price-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ws-space-2);
}

.crf-price-inputs label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	color: var(--ws-muted);
	font-size: var(--ws-fs-xs);
}

.crf-price-inputs input {
	width: 100%;
	min-height: 44px;
	padding: 0 var(--ws-space-3);
	border: 1px solid var(--ws-line);
	border-radius: var(--ws-radius);
	background: var(--ws-bg);
	color: var(--ws-ink);
	font: 500 var(--ws-fs-sm)/1 var(--ws-font-body);
}

.crf-price-inputs input:focus {
	border-color: var(--ws-rose);
	outline: none;
	box-shadow: 0 0 0 3px var(--ws-rose-tint);
}

/* noUiSlider skin */
.crf-price-slider.noUi-target {
	height: 4px;
	border: 0;
	border-radius: var(--ws-radius-pill);
	background: var(--ws-line);
	box-shadow: none;
}

.crf-price-slider .noUi-connect {
	background: var(--ws-rose);
}

.crf-price-slider.noUi-horizontal .noUi-handle {
	top: -10px;
	right: -12px;
	width: 24px;
	height: 24px;
	border: 2px solid var(--ws-rose);
	border-radius: 50%;
	background: var(--ws-bg);
	box-shadow: var(--ws-shadow-sm);
	cursor: grab;
}

.crf-price-slider .noUi-handle::before,
.crf-price-slider .noUi-handle::after {
	display: none;
}

.crf-price-slider .noUi-handle:focus-visible {
	outline: 2px solid var(--ws-rose);
	outline-offset: 3px;
}

/* Actions (desktop / no-JS) */
.crf-actions {
	display: flex;
	align-items: center;
	gap: var(--ws-space-3);
}

.crf-apply {
	flex: 1 1 auto;
	min-height: 44px;
	border: 0;
	border-radius: var(--ws-radius-pill);
	background: var(--ws-rose);
	color: var(--ws-bg);
	font: 600 var(--ws-fs-sm)/1 var(--ws-font-body);
	cursor: pointer;
}

.crf-apply:hover,
.crf-apply:focus-visible {
	background: var(--ws-rose-deep);
	color: var(--ws-bg);
}

.crf-reset {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ws-ink-soft);
	font-size: var(--ws-fs-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.crf-reset:hover {
	color: var(--ws-rose);
}

/* Filters apply live with JS; keep Apply only as a no-JS fallback on desktop. */
body.woocommerce-js .crf-apply {
	display: none;
}

/* ---------- jQuery UI datepicker skin (shop only) ---------- */
#ui-datepicker-div.crf-datepicker {
	z-index: 10000 !important;
	width: 300px;
	max-width: calc(100vw - 32px);
	margin-top: 6px;
	padding: var(--ws-space-3);
	border: 1px solid var(--ws-line);
	border-radius: var(--ws-radius-lg);
	background: var(--ws-bg);
	box-shadow: var(--ws-shadow-lg);
	font-family: var(--ws-font-body);
}

.crf-datepicker .ui-datepicker-header {
	position: relative;
	padding: var(--ws-space-1) 0 var(--ws-space-2);
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ws-ink);
}

.crf-datepicker .ui-datepicker-title {
	margin: 0 48px;
	font-family: var(--ws-font-display);
	font-size: var(--ws-fs-lg);
	font-weight: 600;
	line-height: 36px;
}

.crf-datepicker .ui-datepicker-prev,
.crf-datepicker .ui-datepicker-next {
	top: 4px;
	width: 36px;
	height: 36px;
	border: 1px solid var(--ws-line);
	border-radius: 50%;
	background: var(--ws-bg);
	cursor: pointer;
}

.crf-datepicker .ui-datepicker-prev { left: 0; }
.crf-datepicker .ui-datepicker-next { right: 0; }

.crf-datepicker .ui-datepicker-prev-hover,
.crf-datepicker .ui-datepicker-next-hover {
	top: 4px;
	border-color: var(--ws-ink);
	background: var(--ws-bg);
}

.crf-datepicker .ui-datepicker-prev-hover { left: 0; }
.crf-datepicker .ui-datepicker-next-hover { right: 0; }

.crf-datepicker .ui-datepicker-prev.ui-state-disabled,
.crf-datepicker .ui-datepicker-next.ui-state-disabled {
	opacity: 0.35;
}

.crf-datepicker .ui-datepicker-prev .ui-icon,
.crf-datepicker .ui-datepicker-next .ui-icon {
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border: solid var(--ws-ink);
	border-width: 0 0 2px 2px;
	background: none;
	text-indent: -9999px;
	overflow: hidden;
}

.crf-datepicker .ui-datepicker-prev .ui-icon { transform: translateX(2px) rotate(45deg); }
.crf-datepicker .ui-datepicker-next .ui-icon { transform: translateX(-2px) rotate(-135deg); }

.crf-datepicker table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--ws-fs-sm);
}

.crf-datepicker th {
	padding: var(--ws-space-2) 0;
	border: 0;
	color: var(--ws-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.crf-datepicker td {
	padding: 2px;
	border: 0;
}

.crf-datepicker td a.ui-state-default,
.crf-datepicker td span.ui-state-default {
	display: grid;
	place-items: center;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ws-ink);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
}

@media (hover: hover) {
	.crf-datepicker td:not(.ws-in-range) a.ui-state-default:hover {
		background: var(--ws-rose-tint);
		color: var(--ws-rose-deep);
	}
}

.crf-datepicker td a.ui-state-highlight {
	box-shadow: inset 0 0 0 1px var(--ws-gold);
	background: transparent;
	color: var(--ws-ink);
}

.crf-datepicker td a.ui-state-active,
.crf-datepicker td a.ui-state-active:hover {
	background: var(--ws-rose);
	color: var(--ws-bg);
}

.crf-datepicker .ui-datepicker-other-month a.ui-state-default {
	color: var(--ws-muted);
}

.crf-datepicker .ui-state-disabled span.ui-state-default,
.crf-datepicker .ui-state-disabled {
	opacity: 0.4;
}

/* ---------- Inline event calendar (same flow as the product page) ---------- */
.crf-len { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--ws-space-2) 0; }
.crf-len__label { width: 100%; font-size: var(--ws-fs-xs); color: var(--ws-muted); font-weight: 600; }
.crf-len__chip { flex: 1 1 0; min-height: 40px; padding: 0 6px; border: 1px solid var(--ws-line); border-radius: var(--ws-radius); background: var(--ws-bg); color: var(--ws-ink); font-size: var(--ws-fs-sm); font-weight: 600; cursor: pointer; }
.crf-len__chip.is-active { border-color: var(--ws-rose); background: var(--ws-rose); color: #fff; }
.crf-cal .ui-datepicker { width: 100%; padding: var(--ws-space-2); border: 1px solid var(--ws-line); border-radius: var(--ws-radius-lg); background: var(--ws-bg); font-family: var(--ws-font-body); }
.crf-cal .ui-datepicker td a.ui-state-default { height: 36px; }
.crf-cal .ws-in-range a.ui-state-default { background: var(--ws-rose-tint) !important; color: var(--ws-rose-deep) !important; border-radius: 0 !important; }
.crf-cal .ws-range-start a.ui-state-default, .crf-cal .ws-range-end a.ui-state-default { background: var(--ws-rose) !important; color: #fff !important; border-radius: 50% !important; }
.crf-cal .ws-trip-day a.ui-state-default { background: var(--ws-gold-tint) !important; color: var(--ws-gold-text) !important; }
.crf-cal td:not(.ws-in-range) a.ui-state-active { background: transparent !important; color: var(--ws-ink) !important; }
.crf-cal-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: var(--ws-space-2) 0 0; font-size: var(--ws-fs-xs); color: var(--ws-muted); }
.crf-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.crf-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }
.crf-dot--event { background: var(--ws-rose); }
.crf-dot--trip { background: var(--ws-gold-tint); border: 1px solid var(--ws-gold); }
.crf-cal-summary { margin: var(--ws-space-2) 0 0; padding: 8px 10px; border-radius: var(--ws-radius-sm); background: var(--ws-rose-tint); color: var(--ws-rose-deep); font-size: var(--ws-fs-sm); font-weight: 600; }
.crf-cal-summary[hidden] { display: none; }
.crf-cal-summary span { display: block; margin-top: 2px; color: var(--ws-ink-soft); font-size: var(--ws-fs-xs); font-weight: 400; }
.crf-section--dates.is-flash { outline: 2px solid var(--ws-rose); outline-offset: 4px; border-radius: var(--ws-radius); transition: outline-color .3s; }