/**
 * Lugnalandet – julbordets datumlista.
 *
 * Egen CSS eftersom temats style.css är en kompilerad Tailwind-bundle:
 * utility-klasser som inte redan används där finns inte att tillgå.
 */

.jb-dates__groups {
	margin: 0;
}

.jb-dates__group + .jb-dates__group {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-border, hsl(220 13% 91%));
}

.jb-dates__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jb-dates__row {
	margin: 0.15rem 0;
}

/* Hela raden är en knapp som väljer datumet i bokningsformuläret. */
.jb-dates__pick {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	width: 100%;
	padding: 0.45rem 0.6rem;
	margin-inline: -0.6rem;
	border: 0;
	border-radius: 0.5rem;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.2s ease;
}

.jb-dates__pick:hover {
	background: hsl(35 55% 58% / 0.09);
}

.jb-dates__pick:focus-visible {
	outline: 2px solid var(--color-gold, #c9a227);
	outline-offset: 1px;
}

.jb-dates__pick[aria-pressed="true"] {
	background: hsl(35 55% 58% / 0.14);
	box-shadow: inset 2px 0 0 var(--color-gold, #c9a227);
}

.jb-dates__pick[aria-pressed="true"] .jb-dates__day {
	font-weight: 500;
}

.jb-dates__day {
	color: var(--color-foreground, #1a1a1a);
	white-space: nowrap;
}

/* Prickad hjälplinje mellan dag och tid, som på en meny. */
.jb-dates__leader {
	flex: 1 1 auto;
	min-width: 1.5rem;
	border-bottom: 1px dotted hsl(35 55% 58% / 0.45);
	transform: translateY(-0.3em);
}

.jb-dates__time {
	flex: 0 0 auto;
	color: var(--color-gold, #c9a227);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jb-dates__note {
	margin-top: 1.5rem;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--color-muted-foreground, #6b7280);
}

/* Två spalter först när kortet är brett nog att bära dem. */
@media (min-width: 1280px) {
	.jb-dates__list--split {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 2.5rem;
	}
}

/* Motsvarighet till .required i temats formulärstil, för valfria fält. */
.wpcf7-form .optional {
	margin-left: 0.25rem;
	font-weight: 400;
	color: var(--color-muted-foreground, #6b7280);
}

/* ── Vald sittning i bokningsformuläret ───────────────────────────────── */

/* Rullgardinen behåller en guldkant så länge ett datum är valt. */
select#bk-date.jb-picked {
	border-color: var(--color-gold, #c9a227);
	background-color: hsl(35 55% 58% / 0.08);
	font-weight: 500;
	color: var(--color-foreground, #1a1a1a);
}

/* Kort puls när valet kommer från datumlistan, så ändringen inte missas. */
@keyframes jb-flash {
	0%   { box-shadow: 0 0 0 0 hsl(35 55% 58% / 0.55); }
	35%  { box-shadow: 0 0 0 6px hsl(35 55% 58% / 0.22); }
	100% { box-shadow: 0 0 0 10px hsl(35 55% 58% / 0); }
}

select#bk-date.jb-flash {
	animation: jb-flash 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bekräftelserad under fältet. */
/* Ger plats åt rullgardinens pil så att långa datum inte klipps mitt i. */
select#bk-date {
	padding-right: 2.75rem;
	text-overflow: ellipsis;
}

.jb-picked-note {
	display: flex;
	align-items: flex-start;
	gap: 0.4rem;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	font-weight: 500;
	color: var(--color-gold, #c9a227);
}

.jb-picked-note[hidden] {
	display: none;
}

.jb-picked-note__icon {
	flex: 0 0 auto;
	margin-top: 0.15rem;
}

@keyframes jb-note-in {
	from { opacity: 0; transform: translateY(-3px); }
	to   { opacity: 1; transform: none; }
}

.jb-picked-note.jb-flash-in {
	animation: jb-note-in 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
	select#bk-date.jb-flash,
	.jb-picked-note.jb-flash-in {
		animation: none;
	}
}

/* Dold visuellt, men uppläst av skärmläsare. */
.jb-picked-note__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}