/* Vectelia Réservation — booking form. Inherits the theme's font and colours; the accent can be set with
   --vres-accent / --vres-on-accent on .vres-booking (defaults: the theme's primary, else contrast, colour on its base
   colour). Never currentColor: on a selected day the text is the on-accent colour, and the background would follow it. */
.vres-booking {
	--vres-accent: var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #1f1e17));
	--vres-on-accent: var(--wp--preset--color--base, #fff);
	--vres-line: color-mix(in srgb, currentColor 22%, transparent);
	--vres-soft: color-mix(in srgb, currentColor 6%, transparent);
	--vres-radius: 6px;
	max-width: 34rem;
}
.vres-booking * { box-sizing: border-box; }
.vres-booking button { font: inherit; color: inherit; cursor: pointer; }
.vres-booking button:disabled { cursor: default; }
.vres-booking :focus-visible { outline: 2px solid var(--vres-accent); outline-offset: 2px; }

.vres-field { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; }
.vres-field input, .vres-field select, .vres-field textarea {
	font: inherit; color: inherit; background: transparent;
	padding: .55rem .7rem; border: 1px solid var(--vres-line); border-radius: var(--vres-radius); width: 100%;
}
.vres-party { max-width: 16rem; }

.vres-month { display: flex; align-items: center; justify-content: space-between; margin: .5rem 0; }
.vres-month strong { text-transform: capitalize; }
.vres-nav { background: none; border: 1px solid var(--vres-line); border-radius: var(--vres-radius); width: 2.4rem; height: 2.4rem; font-size: 1.3rem; line-height: 1; }
.vres-nav:disabled { opacity: .3; }

.vres-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; }
.vres-weekday { font-size: .8em; opacity: .7; padding: .2rem 0; text-transform: capitalize; }
.vres-day { height: 2.6rem; border: 1px solid transparent; border-radius: var(--vres-radius); background: none; }
.vres-day--available { border-color: var(--vres-line); font-weight: 600; }
.vres-day--available:hover { background: var(--vres-soft); }
.vres-day:disabled { opacity: .35; }
.vres-day--full:disabled, .vres-day--unavailable:disabled { text-decoration: line-through; }
.vres-day.is-selected { background: var(--vres-accent); border-color: var(--vres-accent); color: var(--vres-on-accent); }

.vres-slots { margin-top: 1.2rem; }
.vres-label { font-weight: 600; margin: 0 0 .5rem; }
.vres-label::first-letter { text-transform: uppercase; }
.vres-times { display: flex; flex-wrap: wrap; gap: .5rem; }
.vres-time { padding: .55rem 1rem; border: 1px solid var(--vres-accent); border-radius: var(--vres-radius); background: none; font-variant-numeric: tabular-nums; }
.vres-time:hover { background: var(--vres-soft); }

.vres-form fieldset { border: 0; padding: 0; margin: 0; }
.vres-form legend { font-weight: 600; margin-bottom: .8rem; padding: 0; }
.vres-summary { font-weight: 600; margin: 0 0 .3rem; }
.vres-summary::first-letter { text-transform: uppercase; }
.vres-hold, .vres-privacy { font-size: .9em; opacity: .8; margin: 0 0 1rem; }
.vres-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.vres-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.vres-submit, .vres-secondary { padding: .7rem 1.4rem; border-radius: var(--vres-radius); border: 1px solid var(--vres-accent); }
.vres-submit { background: var(--vres-accent); color: var(--vres-on-accent) !important; }
.vres-secondary { background: none; }
.vres-link { background: none; border: 0; padding: 0; text-decoration: underline; }
.vres-danger { color: #b3261e !important; }

.vres-status:empty { display: none; }
.vres-status { margin-top: 1rem; }
.vres-status--error { color: #b3261e; font-weight: 600; }
.vres-result { font-size: 1.15em; font-weight: 600; margin: 0 0 .5rem; }
.vres-result:focus { outline: none; }
.vres-manage { font-size: .9em; overflow-wrap: anywhere; }

.vres-booking-placeholder { padding: 1.5rem; border: 1px dashed currentColor; border-radius: 6px; }

@media (prefers-reduced-motion: no-preference) {
	.vres-day, .vres-time { transition: background-color .15s; }
}