/* Date range picker and traveler stepper (Signature Wow §2.2; assets/js/date-picker.js). Without the script none
   of this applies: the native fields show as before. */

/* The enhanced field: the native date stays the control (and the test target) with its text hidden while it is not
   being typed into; a calm formatted date sits over it, letting every press through. */
.picker-field > .field__label { grid-row: 1; }
.picker-field > .field__control,
.picker-field > .picker-value { grid-row: 2; grid-column: 1; }
.picker-field > .field__control { color: transparent; cursor: pointer; }
.picker-field > .field__control::-webkit-calendar-picker-indicator { display: none; }
.picker-field:not(.is-typing) > .field__control::-webkit-datetime-edit { opacity: 0; }
/* Focus given back after a press on the dialog: no ring, as after a click on the field (any key brings it back). */
.picker-quiet:focus-visible { outline: none; }
/* Keyboard focus or typing (date-picker.js): the native day, month and year parts show, as Tab walks through them. */
.picker-field.is-typing > .field__control { color: var(--rym-color-text); cursor: text; }
.picker-value {
	align-self: center;
	overflow: hidden;
	padding-inline: calc(.75rem + 1px);
	color: var(--rym-color-text);
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}
.picker-value.is-empty { color: var(--rym-color-text-muted); }
.picker-field.is-typing > .picker-value { visibility: hidden; }
:is(.search-pill__field, .filter-group--stay .field) > .picker-value { padding-inline: 0; }
.filter-group--stay .picker-value { font-weight: 600; }

/* The dialog: a popover next to its field on large screens, a bottom sheet on phones. */
.picker {
	position: fixed;
	inset: auto;
	inline-size: max-content;
	max-inline-size: calc(100vw - 2rem);
	max-block-size: calc(100dvh - 2rem);
	margin: 0;
	padding: 0;
	overflow: auto;
	border: 1px solid var(--rym-hairline);
	border-radius: var(--rym-radius-panel);
	background-color: var(--rym-brand-white);
	color: var(--rym-color-text);
	box-shadow: var(--rym-shadow-4);
	overscroll-behavior: contain;
	--picker-band: var(--rym-brand-sand);
	--picker-preview: color-mix(in srgb, var(--rym-brand-sand) 55%, var(--rym-brand-white));
}
.picker::backdrop { background-color: rgb(15 36 56 / 28%); }
/* Quiet focus ring inside the dialog (Wow §0): ink, 2 px. */
.picker :focus-visible { outline: 2px solid var(--rym-color-text); outline-offset: 2px; }
.picker__panel { position: relative; display: grid; gap: 1.25rem; padding: 1.5rem 2rem; }
/* Dates: the summary is the visible heading (the title names the dialog for screen readers); close at its end. */
.picker--date .picker__head { position: absolute; inset-block-start: 1.25rem; inset-inline-end: 1.5rem; }
.picker--date .picker__title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.picker__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.picker__title {
	margin: 0;
	color: var(--rym-color-text-muted);
	font-family: var(--rym-font-body);
	font-size: var(--rym-font-size-eyebrow);
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}
:lang(ar) .picker__title { letter-spacing: 0; text-transform: none; }

/* Round hairline controls: close, months, steppers (44 px targets). */
:is(.picker__close, .picker__nav, .picker__step) {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--rym-hairline-strong);
	border-radius: 50%;
	background-color: transparent;
	color: var(--rym-color-text);
	cursor: pointer;
	transition: background-color var(--rym-dur-1) var(--rym-ease-out), border-color var(--rym-dur-1) var(--rym-ease-out), transform var(--rym-duration-press) var(--rym-ease-out);
}
.picker__close { border-color: transparent; }
.picker--guest .picker__close { margin-block: -.5rem; margin-inline-end: -.75rem; }
:is(.picker__close, .picker__nav, .picker__step):disabled { opacity: .3; cursor: default; }
:is(.picker__nav, .picker__step):not(:disabled):active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
	:is(.picker__close, .picker__nav, .picker__step):not(:disabled):hover { border-color: var(--rym-color-text); }
}

/* Arrival → departure, the one being chosen underlined. */
.picker__summary { display: flex; align-items: flex-end; gap: 1.25rem; padding-block-end: 1rem; padding-inline-end: 3rem; border-block-end: 1px solid var(--rym-hairline); }
.picker__end { display: grid; gap: .25rem; min-inline-size: 9rem; margin: 0; padding-block-end: .375rem; border-block-end: 2px solid transparent; }
.picker__end.is-active { border-block-end-color: var(--rym-color-text); }
.picker__label { color: var(--rym-color-text-muted); font-size: .8125rem; }
.picker__date { font-family: var(--rym-font-display); font-size: 1.625rem; font-weight: var(--rym-font-weight-serif); letter-spacing: var(--rym-letter-spacing-serif); line-height: 1.15; }
.picker__date.is-empty { color: var(--rym-color-text-muted); }
:lang(ar) .picker__date { font-size: 1.25rem; font-weight: 700; line-height: 1.5; }
.picker__arrow { padding-block-end: .625rem; color: var(--rym-color-text-muted); }

/* Months: the arrows sit on the month titles' line. */
.picker__body { position: relative; }
.picker__nav { position: absolute; inset-block-start: -.375rem; z-index: 1; }
.picker__nav--prev { inset-inline-start: -.5rem; }
.picker__nav--next { inset-inline-end: -.5rem; }
.picker__months { display: flex; gap: 2.5rem; }
.picker__month { flex: none; }
.picker__month-title {
	margin: 0 0 .5rem;
	font-family: var(--rym-font-display);
	font-size: 1.375rem;
	font-weight: var(--rym-font-weight-serif);
	letter-spacing: var(--rym-letter-spacing-serif);
	line-height: 2rem;
	text-align: center;
	text-transform: capitalize;
}
:lang(ar) .picker__month-title { font-size: 1.125rem; font-weight: 700; }

.picker__grid { inline-size: calc(7 * 2.875rem); border-collapse: separate; border-spacing: 0 .125rem; table-layout: fixed; }
.picker__grid th { padding-block: 0 .5rem; color: var(--rym-color-text-muted); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
:lang(ar) .picker__grid th { letter-spacing: 0; }
.picker__grid td { padding: 0; text-align: center; }
.picker__day { cursor: pointer; }
.picker__num {
	display: inline-grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
	font-size: .9375rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.picker__num { position: relative; }
/* Today: a hairline ring and a 4 px dot under the number (W9a). */
.picker__day.is-today .picker__num { box-shadow: inset 0 0 0 1px var(--rym-hairline-strong); }
.picker__day.is-today .picker__num::after { content: ""; position: absolute; inset-block-end: .4375rem; inset-inline-start: calc(50% - 2px); inline-size: 4px; block-size: 4px; border-radius: 50%; background-color: currentColor; }
.picker__day:focus-visible { outline: none; }
.picker__day:focus-visible .picker__num { outline: 2px solid var(--rym-color-text); outline-offset: 2px; }
.picker__day[aria-disabled="true"] { color: rgb(15 36 56 / 28%); cursor: default; }

/* The range: a sand band between two ink discs; the hover or keyboard preview a lighter band. */
.picker__day:is(.is-range, .is-preview) { background-color: var(--picker-band); }
.picker__day.is-preview:not(.is-range) { background-color: var(--picker-preview); }
.picker__day.is-start { background: linear-gradient(to right, transparent 50%, var(--picker-band) 50%); }
.picker__day.is-end { background: linear-gradient(to left, transparent 50%, var(--picker-band) 50%); }
.picker__day.is-preview-end { background: linear-gradient(to left, transparent 50%, var(--picker-preview) 50%); }
:dir(rtl) .picker__day.is-start { background: linear-gradient(to left, transparent 50%, var(--picker-band) 50%); }
:dir(rtl) .picker__day.is-end { background: linear-gradient(to right, transparent 50%, var(--picker-band) 50%); }
:dir(rtl) .picker__day.is-preview-end { background: linear-gradient(to right, transparent 50%, var(--picker-preview) 50%); }
.picker__months.is-previewing .picker__day[aria-selected="true"]:not(.is-end) { background: linear-gradient(to right, transparent 50%, var(--picker-preview) 50%); }
:dir(rtl) .picker__months.is-previewing .picker__day[aria-selected="true"]:not(.is-end) { background: linear-gradient(to left, transparent 50%, var(--picker-preview) 50%); }
/* No half band off the end of a week row (or of the month). */
.picker__day.is-start.is-row-end,
.picker__day:is(.is-end, .is-preview-end).is-row-start,
.picker__months.is-previewing .picker__day[aria-selected="true"].is-row-end:not(.is-end) { background: none; }
.picker__day:is(.is-range, .is-preview).is-row-start { border-start-start-radius: 1.5rem; border-end-start-radius: 1.5rem; }
.picker__day:is(.is-range, .is-preview).is-row-end { border-start-end-radius: 1.5rem; border-end-end-radius: 1.5rem; }
.picker__day[aria-selected="true"] .picker__num { background-color: var(--rym-color-ink); color: var(--rym-color-on-ink); }
.picker__day.is-preview-end:not([aria-selected="true"]) .picker__num { box-shadow: inset 0 0 0 1px var(--rym-color-text); }
@media (hover: hover) and (pointer: fine) {
	.picker__day:not([aria-disabled="true"]):not([aria-selected="true"]):hover .picker__num { box-shadow: inset 0 0 0 1px var(--rym-color-text); }
}

/* Foot: the one quiet note, then Clear and Apply. */
.picker__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--rym-hairline); }
.picker__note { flex: 1 1 14rem; max-inline-size: 48ch; margin: 0; color: var(--rym-color-text-muted); font-size: .875rem; }
.picker__clear {
	min-block-size: 2.75rem;
	padding-inline: .5rem;
	border: 0;
	background: none;
	color: var(--rym-color-text);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
	cursor: pointer;
	margin-inline-start: auto;
}
.picker .button.picker__apply { min-inline-size: 8rem; margin: 0; box-shadow: none; background-color: var(--rym-color-ink); color: var(--rym-color-on-ink); }
.picker .button.picker__apply:is(:hover, :focus-visible) { background-color: var(--rym-color-accent-hover); color: var(--rym-color-on-ink); }

/* Travelers: the number in serif between hairline steppers. */
.picker--guest .picker__panel { min-inline-size: 22rem; }
.picker--guest .picker__foot { flex-wrap: nowrap; }
.picker--guest .picker__note { flex: 1 1 auto; }
.picker__stepper { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.picker__count { font-family: var(--rym-font-display); font-size: 1.75rem; font-weight: var(--rym-font-weight-serif); letter-spacing: var(--rym-letter-spacing-serif); line-height: 1.2; }
:lang(ar) .picker__count { font-size: 1.375rem; font-weight: 700; }
.picker__steps { display: flex; gap: .75rem; }
.picker--guest .picker__note[hidden] + .picker__apply { margin-inline-start: auto; }

/* Phones: a bottom sheet over a soft ink veil. */
@media (max-width: 39.99rem) {
	.picker {
		inset: auto 0 0;
		inline-size: 100%;
		max-inline-size: none;
		max-block-size: 88dvh;
		border-width: 1px 0 0;
		border-radius: var(--rym-radius-panel) var(--rym-radius-panel) 0 0;
	}
	.picker::backdrop { background-color: rgb(15 36 56 / 40%); }
	html:has(.picker[open]) { overflow: hidden; }
	.picker__panel { gap: 1.25rem; padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
	.picker__end { min-inline-size: 0; flex: 1; }
	.picker__month { flex: 1; }
	.picker__grid { inline-size: 100%; }
	.picker--date .picker__head { inset-block-start: .5rem; inset-inline-end: .5rem; }
	.picker__summary { gap: .75rem; padding-inline-end: 0; }
	.picker__nav--prev { inset-inline-start: 0; }
	.picker__nav--next { inset-inline-end: 0; }
	.picker__date { overflow: hidden; font-size: 1.375rem; text-overflow: ellipsis; white-space: nowrap; }
	:lang(ar) .picker__date { font-size: 1.0625rem; }
	.picker__foot { flex-wrap: nowrap; }
	.picker__note { flex-basis: auto; }
	.picker--guest .picker__panel { min-inline-size: 0; }
}

/* Motion: the popover rises 8 px (falls from above when it opens upward) over a veil that fades in; the sheet slides up.
   Reduced motion: none. */
@media (prefers-reduced-motion: no-preference) {
	.picker[open] { animation: rym-picker-in var(--rym-dur-2) var(--rym-ease-out); }
	.picker.is-above[open] { animation-name: rym-picker-in-above; }
	@keyframes rym-picker-in { from { opacity: 0; transform: translateY(8px); } }
	@keyframes rym-picker-in-above { from { opacity: 0; transform: translateY(-8px); } }
	.picker[open]::backdrop { animation: rym-picker-veil 200ms var(--rym-ease-out); }
	@keyframes rym-picker-veil { from { opacity: 0; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 39.99rem) {
	.picker[open] { animation: rym-picker-sheet var(--rym-duration-panel) var(--rym-ease-drawer); }
	.picker[open]::backdrop { animation-duration: var(--rym-duration-panel); }
	@keyframes rym-picker-sheet { from { transform: translateY(100%); } }
}