/* pp-ui — interaction surfaces the template did not ship.
   Everything here leans on the template's own type scale, spacing tokens and
   form classes; nothing introduces a panel, tint or rule of its own. */

/* --- Room page: the enquiry form in the side card ----------------------
   The card used to be a heading, a button that opened the modal and a phone
   number. It is now the modal's own fields, on the page from the start. The
   markup reuses .form-book / .input-wrap-contact / .text-field, so the only
   work left is fitting that form into a sidebar rather than a 485px modal. */

.room-side-card .headline-modal {
  align-items: flex-start;
  text-align: left;
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

/* .form-block-book scrolls inside the modal; in the page it is just a block. */
.room-side-card .form-block-book {
  overflow: visible;
}

/* The modal has a full column height to spend; the sticky card has one screen,
   so the rhythm tightens and the short fields pair up. */
.room-side-form {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.room-side-form .form-inner {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.room-side-form .text-field {
  padding: 12px 14px;
}

.room-side-form .text-field.select {
  background-position: right 10px center;
  padding-right: 32px;
}

.input-pair-side {
  grid-column-gap: 12px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  display: grid;
}

/* Second pair: "2 svečiai" is short and the room names are long, so the split
   follows the content rather than the grid. */
.room-side-form .input-pair-side ~ .input-pair-side {
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
}

/* A date field cannot shrink below its own yyyy-mm-dd, so below the tablet
   breakpoint — where the card goes full width but the columns get narrow —
   the pairs stack rather than clip. */
@media screen and (max-width: 767px) {
  .input-pair-side {
    grid-template-columns: 1fr;
  }
}

/* Safari lays date inputs out as inline content and ignores width: 100%. */
.room-side-form input[type='date'] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  display: block;
}

/* --- Cards that lead somewhere are clickable in full -------------------
   widgets/cards.js tags the card and forwards the click to the link the card
   already contains; this is the affordance that says so. Inner controls keep
   their own cursor from the template. */

.pp-card {
  cursor: pointer;
}

/* --- Room page: the side card already knows its room -------------------
   "if im already in the room page, why would you make me select a room
   here". The <select> went first, replaced by a line of text with a quiet way
   out; on 2026-08-29 the line itself went too ("this card is overloaded"),
   because the same objection applies to stating the room at all when the <h1>
   two columns left already does. .side-room-fixed / -name / -change are gone
   with it. The room still travels as a hidden ?room=<slug> field, and the form
   still submits natively to /rezervacija/, so "Tikrinti laisvas datas" lands
   on live availability for the chosen dates. */