/* ==========================================================================
   Dahu Theme - Calendriers (hotel-datepicker)

   Seule source du dessin intérieur des calendriers : en-tête, flèches, jours,
   prix, états. Il y en a deux formes, toutes dans .availability-search :
   - la fenêtre (accueil, liste des hébergements, bureau) : deux mois côte à
     côte, une flèche à chaque extrémité ;
   - le calendrier intégré (.datepicker--inline : feuilles mobiles, éditeur de
     dates de la fiche) : un seul mois, ses deux flèches de part et d'autre.

   Le placement (fenêtre, plein écran, carte) reste dans search-bar.css,
   banner.css et single-room.css. Ces feuilles ne doivent plus rien dessiner
   à l'intérieur : c'est leur empilement (plus de cent règles, souvent en
   !important) qui donnait des flèches et des cases différentes d'une page à
   l'autre.
   ========================================================================== */

.availability-search .datepicker {
  --dp-ink: var(--color-text);
  --dp-muted: var(--color-text-light);
  --dp-line: #e4e1da;
  --dp-accent: var(--color-secondary);
  --dp-hover: color-mix(in srgb, var(--color-secondary) 8%, #fff);
  --dp-range: color-mix(in srgb, var(--color-secondary) 15%, #fff);
  --dp-off-bg: #f8f6f2;
  --dp-off-ink: #c5bfb5;
  --dp-cell-height: 2.85rem;
  --dp-button-size: 2.5rem;

  color: var(--dp-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: normal;
}

/* Fiche hébergement : une ligne de plus pour le prix du séjour. */
.availability-search--room-booking .datepicker {
  --dp-cell-height: 3.4rem;
}

/* Éditeur de dates de la fiche, sur bureau : il tient dans la carte latérale,
   de hauteur fixe. Six semaines doivent y entrer sans barre de défilement. */
.availability-search__shell.is-room-editor-open .datepicker {
  --dp-cell-height: 2.55rem;
  --dp-button-size: 2.1rem;
}

.availability-search__shell.is-room-editor-open .datepicker__month-caption th {
  padding-bottom: 0.6rem;
}

.availability-search__shell.is-room-editor-open .datepicker__week-name {
  padding-bottom: 0.4rem;
}

.availability-search__shell.is-room-editor-open .datepicker__month-day {
  padding-top: 0.42rem;
  font-size: 0.85rem;
}

.availability-search__shell.is-room-editor-open .datepicker__day-price {
  margin-top: 0.22rem;
  font-size: 0.6rem;
}

.availability-search .datepicker__inner {
  padding: 0;
}

/* --------------------------------------------------------------------------
   Mois : grille, un ou deux
   -------------------------------------------------------------------------- */

.availability-search .datepicker__months {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Un mois de cinq semaines ne s'étire pas sur la hauteur d'un mois de six :
     les cases gardent la même taille des deux côtés. */
  align-items: start;
  gap: 2.5rem;
}

.availability-search .datepicker:not(.datepicker--inline) .datepicker__months {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Le filet central de la bibliothèque, aligné sur l'espace entre les mois. */
.availability-search .datepicker__months::before {
  background: var(--dp-line);
}

.availability-search .datepicker--inline .datepicker__months::before {
  content: none;
}

.availability-search .datepicker__month {
  float: none;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: inherit;
}

/* La bibliothèque décide « un mois » en regardant si le second est visible :
   il doit donc être masqué dès la construction, par la feuille de style. */
.availability-search .datepicker--inline .datepicker__month--month2 {
  display: none;
}

/* Sur une tablette en plein écran, un mois étiré sur 900 px donnait des
   cases plates et des flèches perdues aux extrémités. */
.availability-search .datepicker--inline {
  max-width: 28rem;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   En-tête : mois et flèches
   -------------------------------------------------------------------------- */

.availability-search .datepicker__month-caption {
  height: auto;
  border: 0;
}

.availability-search .datepicker__month-caption th {
  padding: 0 0 0.85rem;
  border: 0;
  vertical-align: middle;
}

.availability-search .datepicker__month-caption th:first-child {
  text-align: left;
}

.availability-search .datepicker__month-caption th:last-child {
  text-align: right;
}

.availability-search .datepicker__month-name {
  color: var(--dp-ink);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.availability-search .datepicker__month-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dp-button-size);
  height: var(--dp-button-size);
  padding: 0;
  border: 1px solid var(--dp-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--dp-ink);
  font-size: 0;
  line-height: 0;
  text-indent: 0;
  box-shadow: none;
  vertical-align: middle;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

/* Même chevron partout, dessiné en CSS : les caractères « < » et « > » de la
   bibliothèque ne s'alignaient pas d'une police à l'autre. */
.availability-search .datepicker__month-button::after {
  content: "";
  float: none;
  width: 0.55rem;
  height: 0.55rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  background: none;
  transform: rotate(135deg);
  translate: 0.12rem 0;
}

.availability-search .datepicker__month-button--next::after {
  transform: rotate(-45deg);
  translate: -0.12rem 0;
}

.availability-search .datepicker__month-button:hover {
  border-color: var(--dp-accent);
  color: var(--dp-accent);
}

.availability-search .datepicker__month-button:focus-visible {
  outline: 2px solid var(--dp-accent);
  outline-offset: 2px;
}

/* Estompée plutôt que masquée (choix de la bibliothèque) : l'en-tête garde la
   même forme au premier mois disponible. */
.availability-search .datepicker__month-button--disabled {
  visibility: visible;
  opacity: 0.3;
  pointer-events: none;
}

/* Deux mois : une seule flèche par côté, sur le bord extérieur. */
.availability-search .datepicker:not(.datepicker--inline) .datepicker__month--month1 .datepicker__month-button--next,
.availability-search .datepicker:not(.datepicker--inline) .datepicker__month--month2 .datepicker__month-button--prev {
  visibility: hidden;
}

/* --------------------------------------------------------------------------
   Jours de la semaine
   -------------------------------------------------------------------------- */

.availability-search .datepicker__week-days {
  height: auto;
}

.availability-search .datepicker__week-name {
  padding: 0 0 0.55rem;
  color: var(--dp-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Jours
   -------------------------------------------------------------------------- */

.availability-search .datepicker__month-day {
  height: var(--dp-cell-height);
  padding: 0 0.1rem;
  border: 1px solid var(--dp-line);
  background: #fff;
  color: var(--dp-ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* Fiche : chiffre en haut, prix juste dessous. Centrés ensemble, le chiffre
   sautait d'une case à l'autre selon qu'elle portait un prix ou non, et le
   prix finissait collé au bas de la case. */
.availability-search--room-booking .datepicker__month-day {
  padding-top: 0.7rem;
  vertical-align: top;
}

.availability-search .datepicker__day-price {
  display: block;
  margin-top: 0.3rem;
  color: var(--dp-muted);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* Survol des seuls jours libres : sur l'arrivée ou le départ, il remplaçait
   le fond terracotta par la teinte claire en gardant le texte blanc. */
.availability-search .datepicker__month-day--valid:not(.datepicker__month-day--selected):not(.datepicker__month-day--hovering):hover {
  background: var(--dp-hover);
}

.availability-search .datepicker__month-day:focus {
  background: inherit;
}

.availability-search .datepicker__month-day:focus-visible {
  outline: 2px solid var(--dp-accent);
  outline-offset: -2px;
}

/* La bibliothèque peint le jour courant en noir : ici, un jour comme les autres. */
.availability-search .datepicker__month-day--today {
  background: #fff;
  color: var(--dp-ink);
}

/* Indisponible, quelle qu'en soit la raison : un seul aspect, sans la croix
   ni les triangles rouges de la bibliothèque. */
.availability-search .datepicker__month-day--invalid,
.availability-search .datepicker__month-day--disabled,
.availability-search .datepicker__month-day--day-of-week-disabled {
  background: var(--dp-off-bg);
  color: var(--dp-off-ink);
  font-weight: 500;
  cursor: not-allowed;
}

.availability-search .datepicker__month-day--disabled::after,
.availability-search .datepicker__month-day--no-checkin::before,
.availability-search .datepicker__month-day--no-checkout::before {
  content: none;
}

/* Plage : les nuits entre l'arrivée et le départ. */
.availability-search .datepicker__month-day--selected,
.availability-search .datepicker__month-day--hovering {
  background: var(--dp-range);
  color: var(--dp-ink);
}

.availability-search .datepicker__month-day--selected .datepicker__day-price,
.availability-search .datepicker__month-day--hovering .datepicker__day-price {
  color: var(--dp-ink);
}

.availability-search .datepicker__month-day--first-day-selected,
.availability-search .datepicker__month-day--last-day-selected {
  background: var(--dp-accent);
  color: #fff;
}

.availability-search .datepicker__month-day--first-day-selected .datepicker__day-price,
.availability-search .datepicker__month-day--last-day-selected .datepicker__day-price {
  color: rgba(255, 255, 255, 0.88);
}

/* Infobulle « n nuits » au survol. */
.availability-search .datepicker__tooltip {
  margin-top: -0.4rem;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--dp-ink);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
}

.availability-search .datepicker__tooltip::after {
  border-top-color: var(--dp-ink);
}

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
  .availability-search .datepicker {
    --dp-cell-height: 2.7rem;
    --dp-button-size: 2.35rem;
  }

  .availability-search--room-booking .datepicker {
    --dp-cell-height: 3.2rem;
  }

  .availability-search .datepicker__month-day {
    font-size: 0.85rem;
  }

  .availability-search .datepicker__day-price {
    font-size: 0.62rem;
  }
}