/* Badis Booking — Frontend (Kalender, Leiste, Formular). Nutzt Theme-Tokens. */

.booking-bar--widget {
	display: flex; align-items: flex-end; gap: 0;
	background: var(--white, #fff); padding: .6rem; border-radius: 16px;
	box-shadow: 0 18px 50px rgba(14,42,68,.22); max-width: 820px;
}
.booking-bar__field { display: flex; flex-direction: column; gap: .3rem; padding: .35rem 1rem; position: relative; text-align: left; flex: 1 1 0; min-width: 0; }
.booking-bar__field + .booking-bar__field::before { content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 1px; background: var(--line, #e6e0d6); }
.booking-bar__field:nth-child(1) { flex: 1.6 1 0; }     /* Tour breiter */
.booking-bar__field:nth-child(3) { flex: .8 1 0; }      /* Personen schmaler */
.booking-bar__field > span { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted, #64748b); }
.booking-bar__field select, .booking-bar__field input {
	border: 0; background: transparent; padding: .15rem 0; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink, #0e2a44);
	width: 100%; min-width: 0; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.booking-bar__field select:focus, .booking-bar__field input:focus { outline: none; }
.booking-bar--widget .btn { flex: 0 0 auto; margin-left: .6rem; align-self: stretch; padding: .9rem 1.5rem; white-space: nowrap; }

@media (max-width: 720px) {
	.booking-bar--widget { flex-direction: column; align-items: stretch; gap: .2rem; }
	.booking-bar__field { padding: .6rem 1rem; }
	.booking-bar__field + .booking-bar__field::before { left: 1rem; right: 1rem; top: 0; bottom: auto; width: auto; height: 1px; }
	.booking-bar--widget .btn { margin: .4rem 0 0; }
}

/* Kalender */
.bcal-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.bcal { border: 1px solid var(--line, #e6e0d6); border-radius: 12px; padding: 1rem; background: var(--white, #fff); }
.bcal__month { font-weight: 800; margin-bottom: .6rem; color: var(--ink, #0e2a44); text-transform: capitalize; }
.bcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bcal__wd { font-size: .7rem; text-align: center; color: var(--muted, #64748b); font-weight: 700; padding-bottom: .2rem; }
.bcal__day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 8px; font-size: .85rem; border: 0; font: inherit; }
.bcal__day--empty { background: transparent; }
.bcal__day--free { background: #e8f4ea; color: #1c6b34; cursor: pointer; text-decoration: none; font-weight: 700; }
.bcal__day--free:hover, .bcal__day--free.is-selected { background: var(--accent, #F39309); color: var(--ink, #0e2a44); }
.bcal__day--blocked { background: #f4f4f5; color: #b9bcc2; text-decoration: line-through; }
.bcal__legend { font-size: .8rem; color: var(--muted, #64748b); margin-top: .8rem; }
.bcal__key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; }
.bcal__key--free { background: #e8f4ea; }
.bcal__key--blocked { background: #f4f4f5; }

/* Formular */
.booking-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; }
.booking-form { display: grid; gap: .8rem; background: var(--white,#fff); border: 1px solid var(--line,#e6e0d6); border-radius: 12px; padding: 1.4rem; box-shadow: 0 6px 24px rgba(14,42,68,.08); }
.booking-form label { display: grid; gap: .3rem; font-weight: 700; font-size: .9rem; color: var(--ink,#0e2a44); }
.booking-form input, .booking-form select, .booking-form textarea { padding: .6rem; border: 1px solid var(--line,#e6e0d6); border-radius: 8px; font: inherit; }
.booking-form .btn { margin-top: .4rem; }
.booking-form__note { font-size: .8rem; color: var(--muted,#64748b); font-weight: 400; margin: 0; }
.bhp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.booking-success { background: #e8f4ea; border: 1px solid #bfe0c8; border-radius: 12px; padding: 1.5rem; }
.booking-error { background: #fdecea; border: 1px solid #f5c2bd; border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1rem; }

@media (max-width: 820px) {
	.booking-layout { grid-template-columns: 1fr; }
}

/* In der schmalen Tour-Sidebar: Felder untereinander (volle Breite),
   sonst wird das Datum abgeschnitten ("05.08" statt "05.08.2026"). */
.tour__book .booking-bar--widget { flex-direction: column; align-items: stretch; gap: .15rem; padding: .4rem; }
.tour__book .booking-bar__field,
.tour__book .booking-bar__field:nth-child(1),
.tour__book .booking-bar__field:nth-child(3) { flex: 1 1 auto; padding: .55rem .9rem; }
.tour__book .booking-bar__field + .booking-bar__field::before { left: .9rem; right: .9rem; top: 0; bottom: auto; width: auto; height: 1px; }
.tour__book .booking-bar--widget .btn { margin: .5rem 0 0; align-self: stretch; }
/* Datum: nativen Kalender-Picker mit sichtbarem Icon (klare Klick-Affordance) */
.tour__book .booking-bar__field input[type="date"] { appearance: auto; -webkit-appearance: auto; font-weight: 600; }
.tour__book .booking-bar__field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .65; cursor: pointer; }

/* mosparo-Spam-Schutz-Box: Abstand in den Formularen */
.booking-form .mosparo-box,
.badis-anfrage .mosparo-box { margin: .25rem 0 .75rem; }
.badis-checkout-mosparo { margin: 1rem 0; }