/* Buchungsleiste — Mobil-Version der Glas-Pille.

   Stock behaviour (layout.min.css): below 800px the bar is
   `display: none` and only appears once the yellow CTA button opens it
   as a fullscreen dialog (.dialog-open).

   Here the pill stays visible on mobile as a compact version of the
   desktop bar, floating on its own near the bottom of the viewport
   (the quick-nav row it used to fuse with, .cta, is hidden on mobile
   now — see jhotel-overrides.css — so this no longer needs to reserve
   space above it or go transparent to sit inside it).

   Everything is scoped with :not(.dialog-open) so the existing
   fullscreen-dialog styling and the CTA flow stay untouched. */

@media (max-width: 799px) {
  /* Calendar icon: index.html sets 32px inline for desktop — an
     inline style beats a plain stylesheet rule, so this needs
     !important to shrink it back down here. */
  .buchungsleiste:not(.dialog-open) .input-button img {
    width: 18px !important;
    height: 18px !important;
  }

  .buchungsleiste:not(.dialog-open) {
    /* Retuned local tokens — the stock rules derive the button size,
       the corner radius and the field slots from these. */
    --leiste-hoehe: 56px;
    --leiste-rand: 6px;
    --leiste-luecke: 0.3em;

    display: block;
    bottom: 80px;

    /* Edge-to-edge instead of fit-content: on a phone the pill should
       use the full width rather than hug its contents. */
    inset-inline: 10px;
    inline-size: auto;
    max-inline-size: none;
    margin-inline: 0;

    font-size: 1rem;
    letter-spacing: 0;
  }

  .buchungsleiste:not(.dialog-open) .formbody {
    min-block-size: var(--leiste-hoehe);
    column-gap: 8px;
    padding-inline: 14px var(--leiste-rand);
  }

  /* Date fields share the free space instead of sitting in a fixed
     10ch slot, so the pill adapts from 320px phones upward. */
  .buchungsleiste:not(.dialog-open) .widget-calendar {
    flex: 1 1 0;
    inline-size: auto;
    min-inline-size: 0;
  }

  .buchungsleiste:not(.dialog-open) .widget-calendar > div {
    min-inline-size: 0;
  }

  .buchungsleiste:not(.dialog-open) .widget input.text,
  .buchungsleiste:not(.dialog-open) .widget-select select {
    color: #fff;
  }

  .buchungsleiste:not(.dialog-open) .widget input.text {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* "Arrival"/"Departure" were getting clipped by the ellipsis above
       on narrow phones — a touch smaller than the pill's own 1rem
       gives them enough room to render in full instead. */
    font-size: 0.95em;
  }

  .buchungsleiste:not(.dialog-open) .widget input.text::placeholder {
    color: #fff;
    font-weight: 400;
  }

  /* Persons: keep the number and the arrow, drop the spelled-out word
     ("Persons"/"Personen"/"Persone") — it is the widest part of the
     control and the number alone reads fine at this size. */
  .buchungsleiste:not(.dialog-open) .widget-select {
    flex: 0 0 auto;
    padding-inline-start: 0;
  }

  .buchungsleiste:not(.dialog-open) .widget-select::after,
  .buchungsleiste:not(.dialog-open) .widget-select:lang(en)::after,
  .buchungsleiste:not(.dialog-open) .widget-select:lang(it)::after {
    content: "Guests";
    display: inline;
    font-size: 0.95em;
  }

  /* Stray "Persons" label rendered on <html> by the nested :lang() rule. */
  html::after {
    content: none !important;
  }

  .buchungsleiste:not(.dialog-open) .widget-select select {
    /* Undo the desktop trick where the select is stretched invisibly
       across the whole widget; here the widget is only number + arrow. */
    position: relative;
    inset: auto;
    inline-size: 2ch;
    text-align: end;
  }

  /* Submit stays a proper 44px touch target, just less generous
     horizontally than on desktop (2em). */
  .buchungsleiste:not(.dialog-open) button.submit {
    padding: 0 1.1em;
    gap: 0.4em;
    white-space: nowrap;
  }

  /* Button on its own full-width row under arrival / departure / guests,
     so the fields are not squeezed next to it. */
  .buchungsleiste:not(.dialog-open):not(.collapsed) {
    border-radius: 28px;
  }

  .buchungsleiste:not(.dialog-open):not(.collapsed) .formbody {
    flex-wrap: wrap;
    row-gap: 5px;
    padding: 8px calc(var(--leiste-rand) * 0.8) calc(var(--leiste-rand) * 0.8) 11px;
  }

  .buchungsleiste:not(.dialog-open):not(.collapsed) .widget-submit {
    flex: 1 0 100%;
  }

  .buchungsleiste:not(.dialog-open):not(.collapsed) button.submit {
    inline-size: 100%;
    justify-content: center;
    block-size: 48px;
  }

  /* Once collapsed (buchungsleiste-adapt.js, same early scroll
     threshold as desktop) only the Book Now button is left, so the
     pill itself should shrink to it — same as desktop — instead of
     staying stretched edge-to-edge with the button floating inside.
     inset-inline (above) sets both left AND right, which would fight
     inline-size here (over-constrained, picks an inconsistent side);
     clearing it in favor of left:50%/translateX avoids that and
     centers the shrunk pill regardless. */
  .buchungsleiste.collapsed:not(.dialog-open) {
    inset-inline: auto;
    left: 50%;
    translate: -50% 0;
    inline-size: fit-content;
    bottom: 30px;
  }
}

/* Very narrow phones (≤360px): trade the button label for the icon
   alone so the controls keep fitting on one line. */
@media (max-width: 360px) {
  .buchungsleiste:not(.dialog-open) {
    font-size: 0.9rem;
  }

  .buchungsleiste:not(.dialog-open) .formbody {
    column-gap: 6px;
    padding-inline: 10px var(--leiste-rand);
  }

  .buchungsleiste:not(.dialog-open) button.submit {
    padding: 0 0.9em;
  }

  /* Icon eats into the date fields' share of an already-tight row —
     shrink it further here so "Arrival"/"Departure" get the room. */
  .buchungsleiste:not(.dialog-open) .input-button img {
    width: 14px !important;
    height: 14px !important;
  }

  .buchungsleiste:not(.dialog-open) .widget input.text {
    font-size: 0.88em;
  }
}

/* J Hotel Resorts: drop the  "W" logo icon that the stock
   button.submit::before rule masks in front of the label — we don't
   have that mark, and the empty mask was rendering as a stray glyph. */
.buchungsleiste button.submit::before {
  display: none;
}

/* J Hotel Resorts: keep the booking bar always glassy/transparent —
   never switch to the violet ".on-light" tint when scrolling over
   light content, and never solidify white on hover. */
.buchungsleiste.on-light {
  background-color: var(--leiste-tinte) !important;
}