/* ==========================================================
   Barra de reservas Avirato — restyle completo.
   Mantiene las clases/ids que usa av-calendar-public.js.
   ========================================================== */
.booking {
  position: absolute; left: 50%; bottom: 0; z-index: 5;
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  transform: translate(-50%, 50%);
}
.is-loaded .booking { animation-name: bookingIn; }
@keyframes bookingIn { to { opacity: 1; transform: translate(-50%, 50%); } }

.booking .avc-calendar {
  background: var(--paper);
  color: var(--text);
  border-radius: 0;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.4) inset;
  column-gap: 0; row-gap: 0;
  align-items: stretch;
  flex-wrap: nowrap;
}
.booking .avc-calendar > .avc-input.bk-field {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 4px;
  padding: 18px 28px;
  margin: 0;
  background: transparent;
  color: var(--text);
  border-radius: 0;
  border-right: 1px solid rgba(21,32,42,.12);
  position: relative;
  transition: background .3s;
}
.booking .avc-calendar > .avc-input.bk-field:hover { background: rgba(210,165,59,.08); }
.booking .avc-calendar > .avc-input > .bk-label {
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-soft);
  width: auto; height: auto; line-height: 1;
}
.booking .avc-calendar > .avc-input > input {
  font-family: var(--serif); font-size: 24px; line-height: 1.1;
  color: var(--text);
  padding: 0; height: auto; cursor: pointer;
}
.booking .avc-calendar > .avc-input > input::placeholder { color: rgba(21,32,42,.45); }
.booking .avc-calendar > .avc-input.bk-promo > input { font-family: var(--sans); font-weight: 400; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }
.booking .avc-calendar > .avc-input.bk-promo { flex: .8 1 0; }

.booking .avc-calendar > .avc-button {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 16px;
  padding: 0 40px;
  background: var(--gold); color: var(--ink);
  border-radius: 0;
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .32em;
  transition: background .3s;
}
.booking .avc-calendar > .avc-button:hover { background: var(--gold-2); }
.booking .avc-calendar > .avc-button svg { width: 24px; height: 12px; transition: transform .5s var(--ease-out); }
.booking .avc-calendar > .avc-button:hover svg { transform: translateX(6px); }

.bk-note {
  margin-top: 14px; text-align: center;
  font-size: 11px; letter-spacing: .12em; color: var(--text-soft);
}
.bk-note b { font-weight: 500; color: var(--text); }

/* Calendario flatpickr con la paleta de la marca */
.flatpickr-calendar {
  background: var(--paper); color: var(--text);
  border-radius: 0; border: 0;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  font-family: var(--sans);
}
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--paper); }
.flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: var(--paper); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-weekdays, span.flatpickr-weekday { background: transparent; color: var(--text); fill: var(--text); }
.flatpickr-current-month .flatpickr-monthDropdown-months { font-family: var(--serif); font-size: 20px; text-transform: capitalize; }
.flatpickr-current-month input.cur-year { font-family: var(--serif); font-size: 20px; }
span.flatpickr-weekday { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-soft); }
.flatpickr-day { border-radius: 0; color: var(--text); font-weight: 400; }
.flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover { background: var(--cream-2); border-color: var(--cream-2); }
.flatpickr-day.today { border-color: var(--gold); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange {
  background: var(--ink); border-color: var(--ink); color: var(--cream);
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: rgba(21,32,42,.25); }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--gold); }
.flatpickr-weekwrapper .flatpickr-weeks { box-shadow: 1px 0 0 rgba(21,32,42,.1); }
.flatpickr-weekwrapper span.flatpickr-day { color: rgba(21,32,42,.35); }

@media (max-width: 900px) {
  .booking .avc-calendar { flex-wrap: wrap; }
  .booking .avc-calendar > .avc-input.bk-field { flex: 1 1 50%; border-bottom: 1px solid rgba(21,32,42,.12); }
  .booking .avc-calendar > .avc-input.bk-promo { flex: 1 1 50%; border-right: 0; }
  .booking .avc-calendar > .avc-button { flex: 1 1 50%; justify-content: center; min-height: 64px; }
}
@media (max-width: 700px) {
  /* En móvil la barra entra en el flujo y cabalga el borde con margen negativo */
  .booking { position: relative; left: auto; bottom: auto; transform: translateY(18px); width: calc(100% - 2 * var(--gutter)); margin: 0 auto -150px; }
  .is-loaded .booking { animation-name: bookingInM; }
  @keyframes bookingInM { to { opacity: 1; transform: none; } }
  .booking .avc-calendar { flex-direction: row; max-width: none; }
  .booking .avc-calendar > .avc-input.bk-field { padding: 14px 20px; width: auto !important; flex: 1 1 50%; }
  .booking .avc-calendar > .avc-input.bk-field:nth-child(3) { border-right: 0; }
  .booking .avc-calendar > .avc-input.bk-promo { flex: 1 1 100%; }
  .booking .avc-calendar > .avc-input > input { font-size: 20px; }
  .booking .avc-calendar > .avc-button { width: 100% !important; min-height: 60px; }
  .bk-note { font-size: 10px; line-height: 1.5; }
  /* El calendario se centra en pantalla en vez de quedar pegado al borde derecho */
  .flatpickr-calendar.open { left: 50% !important; right: auto !important; translate: -50% 0; max-width: calc(100vw - 24px); }
  .flatpickr-calendar.open::before, .flatpickr-calendar.open::after { display: none; }
}