/* Form band — docs/components.md §3.
   Text 360 wide beside the form card, 50 apart; stacked below desktop.
   Type and colour from role classes; the form's own styling is .vv-form
   (vv-dialogs.css). */

.vv-r-form__grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: var(--vv-gap-50);
  row-gap: var(--vv-section-head-gap);             /* stacked: the heading's text over the form card */
  align-items: start;
}
/* The text column: heading and paragraphs, then each group, 40 apart;
   inside, the heading 20 over its paragraphs (10 apart) or lines. */
.vv-r-form__text,
.vv-r-form__head,
.vv-r-form__paras,
.vv-r-form__group {
  display: flex;
  flex-direction: column;
}
.vv-r-form__text { gap: var(--vv-gap-40); }
.vv-r-form__head { gap: var(--vv-head-text-gap); }
/* A band with no heading or intro of its own leaves no empty slot: the first group's heading
   then starts on the form heading's line instead of one text-gap lower. */
.vv-r-form__head:empty { display: none; }
.vv-r-form__head + .vv-r-form__group { margin-block-start: calc(var(--vv-head-content-gap) - var(--vv-gap-40)); }   /* head block to the first group: 50 */
.vv-r-form__group { gap: var(--vv-gap-20); }
.vv-r-form__paras { gap: var(--vv-gap-10); }
.vv-r-form__lines {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vv-r-form__link { display: inline-flex; align-items: center; gap: var(--vv-gap-10); text-decoration: none; }
.vv-r-form__link:hover > a.vv-icon-link__text { text-decoration: underline; }

/* The form column: no ground, no padding, so it sits on the
   band like the text column beside it and the two heads share one edge. */
.vv-r-form__card {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
}

/* The fields in the card, two to a row from a tablet up so the card is not a
   long single column: the short pairs (country code and phone, location and
   stay) sit together, everything else — name, email, the boxed textareas,
   the send — takes the full row. Below 810 it is one column. */
@media (min-width: 810px) {
  .vv-r-form__card.vv-form .fluentform .frm-fluent-form fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--vv-gap-20);
  }
  .vv-r-form__card.vv-form .fluentform .ff-el-group,
  .vv-r-form__card.vv-form .fluentform .ff_submit_btn_wrapper { grid-column: 1 / -1; }
  .vv-r-form__card.vv-form .fluentform .ff-el-group:has(select, input[type="tel"], input[type="date"]) { grid-column: auto; }
}

/* Chips: a radio group drawn as pills — the live dropdown's
   options, all in view. The input stays in the page (visually hidden) so the
   keyboard and screen readers get a radio group; the label is the pill. */
.vv-r-form__card.vv-form .fluentform .vv-chips .ff-el-input--content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-gap-10);
}
.vv-r-form__card.vv-form .fluentform .vv-chips .ff-el-form-check { margin: 0; padding: 0; }
.vv-r-form__card.vv-form .fluentform .vv-chips .ff-el-form-check-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  margin: 0;
  padding: 0 var(--vv-gap-15);
  border: 1px solid var(--vv-color-line-strong);
  border-radius: 60px;
  background-color: transparent;
  cursor: pointer;
}
.vv-r-form__card.vv-form .fluentform .vv-chips .ff-el-form-check-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.vv-r-form__card.vv-form .fluentform .vv-chips .ff-el-form-check-label:hover { border-color: var(--vv-color-text-default); }
.vv-r-form__card.vv-form .fluentform .vv-chips .ff-el-form-check-label:has(input:checked) {
  border-color: var(--vv-cta-submit-bg);
  background-color: var(--vv-cta-submit-bg);
  color: var(--vv-cta-submit-text);
}
.vv-r-form__card.vv-form .fluentform .vv-chips .ff-el-form-check-label:has(input:focus-visible) {
  outline: 2px solid var(--vv-color-focus);
  outline-offset: 2px;
}

/* Ways to reach us as rows (the Contact pages): lines of one kind are one
   item, the icon leading, no chevron; their height and gaps come from the
   Contact pages' rules below. Desktop keeps the column in
   view while the long form scrolls beside it. */
.vv-r-form__grid--rows .vv-r-form__lines { gap: var(--vv-gap-10); }
.vv-r-form__grid--rows .vv-r-form__link {
  display: flex;
  align-items: center;
  padding: 0;
}
.vv-r-form__grid--rows .vv-r-form__link:hover > a.vv-icon-link__text { text-decoration: none; }
.vv-r-form__icon { flex: none; width: 24px; height: 24px; }
.vv-r-form__link > .vv-icon-link__text { flex: 1; min-width: 0; overflow-wrap: break-word; }
/* A line with no link (address, distance, front office) is the same row, flat. */
.vv-r-form__item { cursor: default; }
/* A vertical rule between the text and the form, side by side only: the form
   column's left edge, 50 from each. */
@media (min-width: 1201px) {
  .vv-r-form__grid:not(.vv-r-form__grid--centered) .vv-r-form__card {
    align-self: stretch;   /* the rule runs the band's full height */
    padding-left: var(--vv-gap-50);
    border-left: 1px solid var(--vv-color-line);
  }
  .vv-r-form__grid:not(.vv-r-form__grid--centered) .vv-r-form__text { align-self: start; }
}
@media (min-width: 1201px) {
  .vv-r-form__grid--rows:not(.vv-r-form__grid--centered) .vv-r-form__text { position: sticky; top: 120px; }
}

/* Centred layout: one column 740 wide at every width — the ways to reach
   us, then the form — so the numbers are the first thing the eye lands on. */
.vv-r-form__grid--centered {
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--vv-measure-800);
  margin-inline: auto;
}
/* One column: the heading and its line 25 over the form (user, 2026-10-07). */
.vv-r-form__grid--centered { row-gap: var(--vv-head-content-gap); }
.vv-r-form__grid--centered .vv-r-form__head,
.vv-r-form__grid--centered .vv-r-form__group > h3 { text-align: left; }

/* Contact layout (`columns`, every Contact page; Figma 978:65, user
   2026-10-11): one column 800 wide, centred — the heading and its paragraph;
   the reservation contacts in one row under a small caps label; the form;
   then the other groups (the property's details, How to reach) 25 apart, each
   one row, and the map under them. The blocks 50 apart. */
.vv-r-form__grid--columns { max-width: var(--vv-measure-800); gap: var(--vv-gap-50); }
.vv-r-form__grid--columns .vv-r-form__head { text-align: left; }
.vv-r-form__grid--columns .vv-r-form__below { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vv-gap-25); }   /* minmax(0): the map's 260 minimum height at 16:7 would hold the column at 594 wide */
.vv-r-form__grid--columns .vv-r-form__groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vv-gap-25); }   /* minmax(0): the map's 260 minimum height at 16:7 would hold the column at 594 wide */
.vv-r-form__grid--columns .vv-r-form__group > h3,
.vv-r-form__grid--columns .vv-r-form__card > h3 { text-align: left; }
.vv-r-form__grid--columns .vv-r-form__card > p { text-align: left; }
.vv-r-form__grid--columns .vv-r-form__card { width: 100%; max-width: var(--vv-measure-800); }
/* 10 from a small label to its lines, 15 to the form's fields. A row is 44
   tall (a tap target) round a 24 icon, so its first line sits 10 inside the
   row, which the list's top margin takes back. */
.vv-r-form__grid--columns .vv-r-form__group { gap: var(--vv-gap-20); }
.vv-r-form__grid--columns .vv-r-form__card { gap: var(--vv-gap-15); }
.vv-r-form__grid--columns .vv-r-form__lines { gap: 0; margin-top: calc(var(--vv-gap-10) * -1); }   /* the 44 rows are their own spacing: 22 between lines */
.vv-r-form__grid--columns .vv-r-form__link { min-height: 44px; }
.vv-r-form__grid--columns .vv-r-form__map { width: 100%; aspect-ratio: 16 / 7; min-height: 260px; }   /* width: without it the ratio sizes the width from the 260 height */
.vv-r-form__grid--columns .vv-r-form__map iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Reach Us (a property's details under the form, user 2026-10-11): the
   heading, then Address, Contact and How to reach, then the map, every block
   25 apart. The lines are plain text; a plain line is the 44 row a link is,
   so a row of both shares one line. Address stacks: one line under another,
   at the text's own leading. */
.vv-r-form__grid--columns .vv-r-form__lines > li.vv-r-form__plain { display: flex; align-items: center; min-height: 44px; }
.vv-r-form__grid--columns .vv-r-form__group--stack .vv-r-form__lines { flex-direction: column; flex-wrap: nowrap; margin-top: 0; }
.vv-r-form__grid--columns .vv-r-form__group--stack .vv-r-form__lines > li.vv-r-form__plain { display: block; min-height: 0; max-width: none; }
/* From a tablet up each group's lines are one row, each item its own
   width, 25 apart, wrapping when the row is full; a long line (the address)
   wraps at 480. */
@media (min-width: 810px) {
  .vv-r-form__grid--columns .vv-r-form__lines {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: var(--vv-gap-25);
  }
  .vv-r-form__grid--columns .vv-r-form__lines > li { flex: none; max-width: var(--vv-measure-480); }
  /* The country code a narrow box before the phone, everything else the full row. */
  .vv-r-form__grid--columns .vv-r-form__card.vv-form .fluentform .frm-fluent-form fieldset { grid-template-columns: 160px minmax(0, 1fr); column-gap: var(--vv-gap-10); }
  /* Only the country code takes the narrow box: any other select (expected guests) the full row. */
  .vv-r-form__grid--columns .vv-r-form__card.vv-form .fluentform .ff-el-group:has(select):not(:has(+ .ff-el-group input[type="tel"])) { grid-column: 1 / -1; }
}

@media (max-width: 1200.98px) {
  .vv-r-form__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 809.98px) {
  /* The send takes the card's width: a thumb-sized target. */
  .vv-r-form__card.vv-form .fluentform .ff-btn-submit { width: 100%; justify-content: center; }
}

/* Joined to the band above (global Contact): one section with it, the form
   50 under the contact row instead of a band's top and bottom padding. */
.vv-band--r-form.vv-r-form--joined { padding-block-start: var(--vv-gap-50); }

/* Shared by both layouts (the in-page forms rely on these; the Contact
   pages override them below): the 44 rows' 10 under the last line taken
   back as the 10 over the first is. */
.vv-r-form__grid--columns { gap: var(--vv-gap-25); }
.vv-r-form__grid--columns > .vv-r-form__below { margin-block-start: var(--vv-gap-25); }
.vv-r-form__grid--columns .vv-r-form__text { gap: var(--vv-gap-25); }
.vv-r-form__grid--columns .vv-r-form__head + .vv-r-form__group { margin-block-start: 0; }
.vv-r-form__grid--columns .vv-r-form__group:not(.vv-r-form__group--stack) .vv-r-form__lines { margin-bottom: calc(var(--vv-gap-10) * -1); }

/* Contact pages (`columns`, user 2026-10-11): Contact and Reach Us are h2s
   in the Heading 2 style. Three gaps, every width: 10 from a title to what
   it heads (heading to paragraph, label to its lines or the form), 10 from
   an icon to its label, 50 between groups (the head, Reach out to us, the
   form, Reach Us, each of its groups, the map). Lines are their text's
   height, 10 apart, no 44 rows or negative margins. */
.vv-r-form__grid--columns:not(.vv-r-form__grid--stacked) { gap: var(--vv-head-content-gap); }
.vv-r-form__grid--columns:not(.vv-r-form__grid--stacked) > .vv-r-form__below { margin-block-start: 0; }
.vv-r-form__grid--columns:not(.vv-r-form__grid--stacked) :is(.vv-r-form__text, .vv-r-form__below, .vv-r-form__groups) { gap: var(--vv-head-content-gap); }
.vv-r-form__grid--columns:not(.vv-r-form__grid--stacked) :is(.vv-r-form__head, .vv-r-form__group, .vv-r-form__card) { gap: var(--vv-head-text-gap); }
.vv-r-form__grid--columns:not(.vv-r-form__grid--stacked) .vv-r-form__lines { row-gap: var(--vv-gap-10); margin: 0; }
.vv-r-form__grid--columns:not(.vv-r-form__grid--stacked) .vv-r-form__group:not(.vv-r-form__group--stack) .vv-r-form__lines { margin: 0; }
.vv-r-form__grid--columns:not(.vv-r-form__grid--stacked) .vv-r-form__link { gap: var(--vv-gap-10); min-height: 0; }
.vv-r-form__grid--columns:not(.vv-r-form__grid--stacked) .vv-r-form__lines > li.vv-r-form__plain { min-height: 0; }

/* In-page forms (`stacked`, user 2026-10-11, layout reference): the head
   across the band, then from 1201 up the contact groups in a third-width
   column beside the form (two thirds), 50 apart; one column below. Spacing
   steps by what it separates: 10 inside the head, 25 from a label to its
   lines or fields, 50 between groups and from the head to the content. */
.vv-r-form__grid--stacked { row-gap: var(--vv-head-content-gap); }
.vv-r-form__grid--stacked .vv-r-form__text { gap: var(--vv-gap-50); }
.vv-r-form__grid--stacked .vv-r-form__group { gap: var(--vv-gap-25); }
/* The form's label 10 over its line (a head, §4), the fields 25 under either. */
.vv-r-form__grid--stacked .vv-r-form__card { gap: var(--vv-head-text-gap); }
.vv-r-form__grid--stacked .vv-r-form__card > :not(h3, p) { margin-block-start: calc(var(--vv-gap-25) - var(--vv-head-text-gap)); }
@media (min-width: 1201px) {
  .vv-r-form__grid--stacked {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--vv-gap-50);
    max-width: none;
  }
  .vv-r-form__grid--stacked > .vv-r-form__head { grid-column: 1 / -1; max-width: var(--vv-measure-800); }   /* text max 800 (§4) */
  .vv-r-form__grid--stacked .vv-r-form__lines { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
  .vv-r-form__grid--stacked .vv-r-form__lines > li { max-width: none; }
  .vv-r-form__grid--stacked .vv-r-form__card { max-width: none; }   /* the full two thirds, not the Contact column's 800 */
  .vv-r-form__grid--stacked .vv-r-form__card > :is(h3, p) { max-width: var(--vv-measure-800); }   /* its label and line keep the 800 text measure (§4) */
}

/* In-page forms are one white card (user, 2026-10-11): the head, the groups
   and the form on white, 50 inside; 25 either side on a phone, as the
   closing card. */
.vv-r-form__grid--stacked {
  padding: var(--vv-gap-50);
  background-color: var(--vv-color-background-highlight);
}
@media (max-width: 809.98px) {
  .vv-r-form__grid--stacked { padding-inline: var(--vv-gap-25); }
}