/* ==========================================================================
   Replica dialogs — "Tell Us About Your Stay" and "Get 10% off for your first
   stay". Measured off the live Alleppey Overview at 1440 and 390, 2026-09-24
   (inc/dialogs.php). Type comes from vv-type.css (.vv-form, .vv-role-*);
   this file sets layout, boxes and colour roles only.

   A 588px white card over an 80% black overlay, padded 40 (20 on a phone):
   heading and line 10 apart; the form 40 under them; fields 20 apart, each a
   sans label 10 above a 40px boxed field (the message box 100 tall); the
   navy pill 20 under the last field. Heights come
   out as live's: 754 for the enquiry, 740 for the newsletter.
   ========================================================================== */

.vv-dialog {
  width: min(588px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100% - 40px);
  padding: var(--vv-dialog-pad);
  border: 0;
  background-color: var(--vv-color-background-highlight);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.vv-dialog::backdrop { background-color: var(--vv-color-overlay); }

/* A dialog sits outside any band, so the band's resets do not reach it: the
   theme's global heading and paragraph margins would. */
.vv-dialog :where(h1, h2, h3, h4, h5, h6, p) { margin: 0; }

.vv-dialog__view {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-40);
}

.vv-dialog__view[hidden] { display: none; }

.vv-dialog__head h2:focus { outline: none; }   /* focused on open for screen readers only */
.vv-dialog__head h2 { white-space: pre-wrap; }  /* the live heading's spaces are copy */

.vv-dialog__head {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
  padding-inline-end: 32px;            /* clear of the 32px close button, as live */
}

.vv-dialog .vv-dialog__close:hover,
.vv-dialog .vv-dialog__close:focus { background: none; color: var(--vv-color-control-icon); }

.vv-dialog__close {
  position: absolute;
  top: var(--vv-dialog-pad);
  right: var(--vv-dialog-pad);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vv-color-control-icon);
  cursor: pointer;
}

.vv-dialog__close-icon { width: 32px; height: 32px; stroke-width: 1; }   /* live's X is a 1px stroke */

.vv-dialog__close:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: 2px; }

/* ---------- Fluent Forms markup ---------- */

.vv-form .fluentform,
.vv-form .fluentform .frm-fluent-form { margin: 0; }

.vv-form .fluentform .frm-fluent-form fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-20);
}

/* Block, not flex: Fluent Forms puts zero-height helpers in a group, and a
   flex gap would open round each of them. */
.vv-form .fluentform .ff-el-group { display: block; margin: 0; padding: 0; }

.vv-form .fluentform .ff-el-input--label { display: block; margin: 0 0 var(--vv-gap-10); padding: 0; }
.vv-form .fluentform .ff-el-input--label label { display: block; margin: 0; }
/* The asterisk a space after the label, as live; Fluent adds 3px more. */
.vv-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { content: " *"; margin-left: 0; }

.vv-form .fluentform .ff-el-input--content { display: block; }
.vv-form .fluentform .ff-el-help-message { margin: var(--vv-gap-10) 0 0; }

/* One field system for every control (the dialogs and the form band), after
   constancehotels.com's enquiry form (user, 2026-10-11): every field boxed,
   a 1px line all round, no fill, so the dialog's white or the band's ground
   shows through; 40 tall, 12 inset. Block, or a line box adds a pixel. */
.vv-form .fluentform .ff-el-form-control,
.vv-form .fluentform .choices__inner {
  display: block;
  width: 100%;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--vv-color-line);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  outline: 0;
}

.vv-form .fluentform textarea.ff-el-form-control {
  height: 100px;
  padding: 12px;
  resize: vertical;
}

.vv-form .fluentform .ff-el-form-control::placeholder { color: var(--vv-color-text-placeholder); opacity: 1; }

/* A native select drawn as the others, with one chevron (the country list's,
   below). The wrapper carries the chevron because a select has no ::after. */
.vv-form .fluentform select.ff-el-form-control,
.vv-form .fluentform select.ff-el-form-control:not([size]):not([multiple]) {   /* out-ranks Fluent's auto height */
  height: 40px;
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.vv-form .fluentform .ff-el-input--content:has(> select) { position: relative; }
.vv-form .fluentform .ff-el-input--content:has(> select)::after,
.vv-form .fluentform .choices[data-type*="select-one"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  margin: 0;
  border: 0;
  border-right: 1.5px solid var(--vv-color-control-icon);
  border-bottom: 1.5px solid var(--vv-color-control-icon);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

/* Open, the browser draws a native list nearly the screen's height. Where it
   can be styled (Chromium's customizable select) it is a panel in the field's
   own line and ground, 240 tall at most, never narrower than the field, and on
   a phone exactly the field's width; elsewhere the browser's own list stays.
   The wrapper's chevron above stands in for the picker's icon. */
@supports (appearance: base-select) {
  .vv-form .fluentform select.ff-el-form-control:not([size]):not([multiple]),   /* out-ranks the appearance: none above */
  .vv-form .fluentform select.ff-el-form-control::picker(select) { appearance: base-select; }
  .vv-form .fluentform select.ff-el-form-control { display: flex; align-items: center; }
  .vv-form .fluentform select.ff-el-form-control::picker-icon { display: none; }
  .vv-form .fluentform select.ff-el-form-control::picker(select) {
    min-width: anchor-size(width);
    max-height: 240px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--vv-color-line);
    border-radius: 0;
    background-color: var(--vv-color-background-highlight);
    box-shadow: none;
  }
  .vv-form .fluentform select.ff-el-form-control option {
    min-height: 40px;
    padding: 0 12px;
    white-space: nowrap;
  }
  .vv-form .fluentform select.ff-el-form-control option::checkmark { display: none; }
  .vv-form .fluentform select.ff-el-form-control option:is(:hover, :focus-visible, :checked) {
    outline: 0;
    background-color: var(--vv-color-background-row);
  }
}
@supports (appearance: base-select) {
  @media (max-width: 809.98px) {
    .vv-form .fluentform select.ff-el-form-control::picker(select) { width: anchor-size(width); }
    .vv-form .fluentform select.ff-el-form-control option { padding-top: 8px; padding-bottom: 8px; white-space: normal; }
  }
}

/* The active state, on click or keyboard: no ring. The box's line thickens
   to 2px in the highlight colour, drawn inside it so nothing moves. Fluent's
   own blue focus border is put out. */
.vv-form .fluentform .ff-el-form-control:focus,
.vv-form .fluentform .ff-el-form-control:focus-visible,
.vv-form .fluentform .choices.is-focused .choices__inner,
.vv-form .fluentform .choices.is-open .choices__inner {
  outline: 0;
  border-color: var(--vv-color-line-active);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--vv-color-line-active);
}

/* A date picker in a dialog renders beside its input (static mode,
   js/vv-dialogs.js), in a wrapper Flatpickr makes inline: the field keeps
   its full width. */
:is(.vv-dialog, .vv-modal-dialog) .flatpickr-wrapper { display: block; }   /* the booking dialog (footer.php) too */
/* Every form's calendar (.vv-calendar, js/vv-dialogs.js), in a dialog or a
   page: the form's type (vv-type.css) and the site's colours:
   gold for today, the filled button's navy for the chosen day. Each day
   centres its number in its own box, whatever the type's line height. */
.vv-calendar .flatpickr-day { display: inline-flex; align-items: center; }
.vv-calendar .flatpickr-day:is(:hover, :focus) { border-color: var(--vv-color-line); background: var(--vv-color-background); }
.vv-calendar .flatpickr-day.today { border-color: var(--vv-color-line-active); }
.vv-calendar .flatpickr-day.today:is(:hover, :focus) { border-color: var(--vv-color-line-active); background: var(--vv-color-background); color: var(--vv-color-text-default); }
.vv-calendar .flatpickr-day:is(.prevMonthDay, .nextMonthDay) { color: var(--vv-color-text-placeholder); }
/* The month's name opens the month grid (js/vv-dialogs.js): a chevron says
   so, turned up while the grid is open. */
.vv-calendar .flatpickr-current-month span.cur-month { margin: 0; padding: 0 var(--vv-gap-5); cursor: pointer; }
.vv-calendar .flatpickr-current-month span.cur-month:hover { background: var(--vv-color-background); }
.vv-calendar .flatpickr-current-month span.cur-month:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: 2px; }
.vv-calendar .flatpickr-current-month span.cur-month::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-start: var(--vv-gap-5);   /* the chevron close to its month */
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}
.vv-calendar .flatpickr-current-month .numInputWrapper { margin-inline-start: var(--vv-gap-10); }   /* a space between month and year (user, 2026-10-14) */
.vv-calendar .flatpickr-current-month span.cur-month[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
/* The twelve months over the days, three across, on the calendar's ground. */
.vv-calendar .vv-monthgrid {
  position: absolute;
  inset: 34px 0 0 0;                  /* under the 34px month row, over the weekdays */
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: center;
  gap: var(--vv-gap-10);
  padding: var(--vv-gap-10);
  background-color: var(--vv-color-background-highlight);   /* the calendar's white */
}
.vv-calendar .vv-monthgrid[hidden] { display: none; }
.vv-calendar .vv-monthgrid__month,
.vv-calendar .vv-monthgrid__month:is(:hover, :focus) {
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 150px;
  background: none;
  color: var(--vv-color-text-default);
  cursor: pointer;
}
.vv-calendar .vv-monthgrid__month:is(:hover, :focus-visible) { border-color: var(--vv-color-line); background: var(--vv-color-background); }
.vv-calendar .vv-monthgrid__month:disabled,
.vv-calendar .vv-monthgrid__month:disabled:hover { border-color: transparent; background: none; color: var(--vv-color-text-placeholder); cursor: default; }
.vv-calendar .vv-monthgrid__month:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: 2px; }
.vv-calendar .vv-monthgrid__month.is-current,
.vv-calendar .vv-monthgrid__month.is-current:is(:hover, :focus) {
  border-color: var(--vv-cta-primary-bg);
  background: var(--vv-cta-primary-bg);
  color: var(--vv-cta-primary-text);
}
.vv-calendar .flatpickr-day.selected,
.vv-calendar .flatpickr-day.selected:is(:hover, :focus) {
  border-color: var(--vv-cta-primary-bg);
  background: var(--vv-cta-primary-bg);
  color: var(--vv-cta-primary-text);
}

/* The searchable country list (Choices.js, bundled with Fluent Forms free):
   closed, it reads as the other fields. */
.vv-form .fluentform .choices { margin: 0; overflow: visible; font-size: inherit; }
.vv-form .fluentform .choices__inner { display: flex; align-items: center; padding: 0 40px 0 12px; }
.vv-form .fluentform .choices__list--single { padding: 0; }
.vv-form .fluentform .choices__button { display: none; }
.vv-form .fluentform .choices__inner .choices__item { padding: 0; }

/* Open: one panel, one scrollbar (Fluent scrolls both the panel and the list
   inside it, which drew two), in the field's own line, not Fluent's blue. */
.vv-form .fluentform .choices .choices__list--dropdown,
.vv-form .fluentform .choices .choices__list--dropdown.is-active {
  max-height: none;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--vv-color-line);
  border-radius: 0;
  background-color: var(--vv-color-background-highlight);
  box-shadow: none;
}
.vv-form .fluentform .choices .choices__list--dropdown .choices__list,
.vv-form .fluentform .choices .choices__list--dropdown.is-active .choices__list[role="listbox"] {
  max-height: 240px;
  overflow-x: hidden;
  overflow-y: auto;
}
.vv-form .fluentform .choices__list--dropdown .choices__item {
  min-height: 40px;
  padding: 0 12px;
}
.vv-form .fluentform .choices__list--dropdown .choices__item--selectable { padding-right: 12px; }
.vv-form .fluentform .choices__list--dropdown .choices__item--selectable::after { content: none; }
.vv-form .fluentform .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--vv-color-background-row);
}
.vv-form .fluentform .choices .choices__input,
.vv-form .fluentform .choices .choices__list--dropdown .choices__input {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--vv-color-line);
  border-radius: 0;
  background-color: var(--vv-color-background-highlight);
  outline: 0;
}
.vv-form .fluentform .choices .choices__input:focus { border-color: var(--vv-color-line); box-shadow: inset 0 -2px 0 0 var(--vv-color-line-active); }

/* The send button: the secondary button (user, 2026-10-11; primary until
   then). Fluent Forms draws its markup, so it can't be vv_button(); it takes
   the secondary button's tokens, size and hover instead, and follows any
   change to them. */
.vv-form .fluentform .ff_submit_btn_wrapper { display: flex; margin: 0; }
.vv-form .fluentform .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 36px;
  height: auto;
  padding: 0 var(--vv-cta-pad-x);
  border: 1px solid var(--vv-cta-secondary-border);
  border-radius: var(--vv-cta-radius);
  background-color: var(--vv-cta-secondary-bg);
  color: var(--vv-cta-secondary-text);
  cursor: pointer;
  transition:
    background-color var(--vv-motion-hover-duration) var(--vv-motion-hover-easing),
    border-color var(--vv-motion-hover-duration) var(--vv-motion-hover-easing),
    color var(--vv-motion-hover-duration) var(--vv-motion-hover-easing);
}
.vv-form .fluentform .ff-btn-submit:hover {
  border-color: var(--vv-cta-secondary-border-hover);
  background-color: var(--vv-cta-secondary-bg-hover);
  color: var(--vv-cta-secondary-text-hover);
}
/* The newsletter dialog's send button is the filled (primary) button
   (user, 2026-10-14). */
.vv-dialog--newsletter.vv-form .fluentform .ff-btn-submit {
  border-color: var(--vv-cta-primary-bg);
  background-color: var(--vv-cta-primary-bg);
  color: var(--vv-cta-primary-text);
}
.vv-dialog--newsletter.vv-form .fluentform .ff-btn-submit:hover {
  border-color: var(--vv-cta-primary-bg-hover);
  background-color: var(--vv-cta-primary-bg-hover);
  color: var(--vv-cta-primary-text-hover);
}
.vv-form .fluentform .ff-btn-submit:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: 3px; }

/* Errors and the enquiry's confirmation, in the dialog's own voice. */
.vv-form .fluentform .error.text-danger,
.vv-form .fluentform .ff-el-is-error .error { margin-block-start: var(--vv-gap-5); color: var(--vv-color-text-error); }
.vv-form .fluentform .ff-el-is-error .ff-el-form-control { border-bottom-color: var(--vv-color-text-error); }
.vv-form .fluentform .ff-message-success { margin: 0; padding: 0; border: 0; box-shadow: none; color: var(--vv-color-text-default); }

/* The newsletter shows its own welcome view instead of a message. */
#vv-newsletter-modal .ff-message-success { display: none; }

/* ---------- Newsletter success ----------
   From the user's screenshot of the live state (at 2x): the code 80 under
   the line, centred; the grey pill 20 under it. */
.vv-dialog__success { gap: 0; }

.vv-dialog__code {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vv-gap-20);
  margin-block-start: 80px;
}

.vv-dialog .vv-dialog__copy,
.vv-dialog .vv-dialog__copy:hover,
.vv-dialog .vv-dialog__copy:focus {
  padding: 6px 10px;
  border: 0;
  border-radius: 60px;
  background-color: var(--vv-color-control-quiet);   /* over the theme's global button:focus */
  color: var(--vv-color-text-default);
  cursor: pointer;
}
.vv-dialog__copy:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: 2px; }

/* The newsletter's line runs the full width — only its heading keeps clear
   of the close button — and on a phone its form sits 30 under it, not 40. */
.vv-dialog--newsletter .vv-dialog__head { padding-inline-end: 0; }
.vv-dialog--newsletter .vv-dialog__head h2 { padding-inline-end: 32px; }

/* ---------- Breakpoints ---------- */

:root { --vv-dialog-pad: 40px; }

@media (max-width: 809.98px) {
  :root { --vv-dialog-pad: 20px; }
  .vv-dialog--newsletter [data-vv-dialog-view="form"] { gap: var(--vv-gap-30); }
}

.vv-dialog__title { color: var(--vv-color-text-highlight); }   /* the dialogs' titles, gold (type v5: colour by component) */