/* Booking widget and standalone page.
   Colours, radii and spacing are the site's theme tokens (§16), with calm fallbacks. Logical
   properties only, so an RTL site mirrors without extra rules. */

.nb-widget,
.nb-page {
  color: var(--nb-text);
  background: var(--nb-bg);
  font: inherit;
}

/* The tokens live on both: the guest pages (manage, change, cancel, verify, pay) are body.nb-page
   with no .nb-widget, and a var() with no definition drops the whole declaration. --nb-on-ink is
   the text on the accent and --nb-ring the focus ring; the script re-picks both by contrast when
   the merchant sets an accent colour. --nb-border is 3:1 on white and on the cream page (1.4.11). */
.nb-widget,
.nb-page {
  --nb-text: var(--nilda-color-text, var(--text, var(--ink, #1f1f1f)));
  --nb-bg: var(--nilda-color-bg, var(--bg, #faf7f0));
  --nb-ink: var(--nb-accent, var(--nilda-color-ink, var(--ink, #1f1f1f)));
  --nb-on-ink: var(--nilda-color-bg, var(--bg, #fff));
  --nb-ring: var(--nb-ink);
  --nb-surface: var(--nilda-color-surface, var(--surface, #ffffff));
  --nb-border: var(--nilda-color-border, #8c8678);
  --nb-muted: var(--nilda-color-text2, var(--text2, #6b675e));
  --nb-radius: var(--radius-card, 12px);
  --nb-control: var(--radius-control, 8px);
}

.nb-widget {
  display: grid;
  gap: var(--nilda-space-4, 16px);
}

/* Visually hidden, still read: the status and alert regions and the date part of a button's name. */
.nb-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nb-root {
  display: grid;
  gap: var(--nilda-space-4, 16px);
}

.nb-heading {
  margin: 0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
}

.nb-intro {
  margin: 0;
  color: var(--nb-muted);
  line-height: 1.5;
}

.nb-step {
  display: grid;
  gap: var(--nilda-space-3, 12px);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.nb-legend {
  padding: 0;
  margin-block-end: var(--nilda-space-2, 8px);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}

.nb-legend:focus-visible {
  outline: 2px solid var(--nb-ring);
  outline-offset: 3px;
}

.nb-status,
.nb-empty {
  margin: 0;
  color: var(--nb-muted);
}

.nb-choices,
.nb-days,
.nb-slots,
.nb-compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nilda-space-2, 8px);
}

.nb-choice,
.nb-day,
.nb-slot,
.nb-place,
.nb-primary,
.nb-back,
.nb-link {
  min-block-size: 44px;
  min-inline-size: 44px;
  font: inherit;
  cursor: pointer;
  border-radius: var(--nb-control);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.nb-choice {
  display: grid;
  gap: 2px;
  padding: var(--nilda-space-3, 12px) var(--nilda-space-4, 16px);
  text-align: start;
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  box-shadow: none;
}

.nb-choice-name {
  font-weight: 600;
}

.nb-choice-note {
  color: var(--nb-muted);
  font-size: 0.95em;
}

.nb-group {
  display: grid;
  gap: var(--nilda-space-2, 8px);
}

.nb-location {
  display: grid;
  gap: var(--nilda-space-2, 8px);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.nb-location-name {
  padding: 0;
  margin-block-end: var(--nilda-space-1, 4px);
  font-weight: 600;
}

.nb-location-address {
  margin: 0;
  color: var(--nb-muted);
  font-size: 0.95em;
}

.nb-group-title {
  margin: 0;
  padding-block: var(--nilda-space-1, 4px);
  color: var(--nb-muted);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nb-choice-meta {
  color: var(--nb-muted);
  font-size: 0.9em;
}

.nb-left {
  color: var(--nilda-color-text3, var(--text3, var(--nb-muted)));
  font-size: 0.8em;
  font-weight: 500;
  white-space: nowrap;
}

.nb-method {
  display: flex;
  align-items: flex-start;
  gap: var(--nilda-space-2, 8px);
  cursor: pointer;
}

.nb-method input {
  margin-block-start: 3px;
  accent-color: var(--nb-ink);
}

.nb-method-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nb-countdown {
  margin: 0;
  color: var(--nb-muted);
  font-variant-numeric: tabular-nums;
}

.nb-slot[aria-current="true"] .nb-left {
  color: inherit;
}

.nb-parties .nb-party {
  min-inline-size: 3rem;
  padding-inline: var(--nilda-space-2, 8px);
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
}

.nb-day,
.nb-slot {
  display: grid;
  gap: 2px;
  padding: var(--nilda-space-2, 8px) var(--nilda-space-3, 12px);
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  color: var(--nb-text);
}

.nb-day-name {
  font-weight: 600;
  white-space: nowrap;
}

.nb-day-closed {
  font-size: 0.8em;
  color: var(--nb-muted);
}

/* Dimmed by a dashed edge and the muted colour, never by opacity: the reason ("closed") stays 4.5:1. */
.nb-day:disabled {
  cursor: not-allowed;
  background: transparent;
  border-style: dashed;
  color: var(--nb-muted);
}

.nb-choice[aria-current="true"],
.nb-day[aria-current="true"],
.nb-slot[aria-current="true"],
.nb-place[aria-current="true"] {
  background: var(--nb-ink);
  border-color: var(--nb-ink);
  color: var(--nb-on-ink);
}

/* The choice is also a word-free mark inside the button, never colour alone (1.4.1): a check mark. The
   second declaration gives it an empty accessible text where the browser supports "/", so a screen reader
   does not read "check mark" before each name; the buttons already carry aria-current. */
.nb-choice[aria-current="true"]::before,
.nb-day[aria-current="true"]::before,
.nb-slot[aria-current="true"]::before,
.nb-place-auto[aria-current="true"]::before,
.nb-place[aria-current="true"] .nb-place-label::before {
  content: "\2713\00a0";
  content: "\2713\00a0" / "";
  font-weight: 700;
}

/* Windows contrast themes replace the fill and the border colours: the chosen button keeps a thick system
   highlight edge (and the check mark in its label), the taken one the system grey text. The chosen button is
   NOT filled with the highlight: a text over a see-through highlight gets a black backplate and its black
   system text vanished on it (M5 walk, 2026-10-22), so it keeps the canvas pair and the edge says "chosen". */
@media (forced-colors: active) {
  .nb-choice[aria-current="true"],
  .nb-day[aria-current="true"],
  .nb-slot[aria-current="true"],
  .nb-place[aria-current="true"] {
    background: Canvas;
    border: 4px solid Highlight;
    color: CanvasText;
    outline: 2px solid Highlight;
  }

  .nb-place[aria-disabled="true"],
  .nb-day:disabled {
    color: GrayText;
  }
}

/* The table choice (B9): one set of named buttons. With a floor-plan picture the places that have a spot
   on it sit over it at their coordinates (thousandths of its width and height, set by the script as
   --nb-x / --nb-y); the figure is dir="ltr" so the picture keeps its geometry in a right-to-left page.
   Under 480px of the figure's own width the buttons leave the picture and stack under it. */
.nb-places {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nilda-space-2, 8px);
}

.nb-place {
  display: grid;
  gap: 2px;
  padding: var(--nilda-space-2, 8px) var(--nilda-space-3, 12px);
  background: var(--nb-surface);
  border: 2px solid var(--nb-border);
  color: var(--nb-text);
  text-align: start;
}

.nb-place-label {
  font-weight: 600;
}

.nb-place-meta {
  font-size: 0.85em;
}

/* Taken: a dashed edge and the muted colour, never opacity, so the reason stays readable. */
.nb-place[aria-disabled="true"] {
  cursor: not-allowed;
  background: transparent;
  border-style: dashed;
  color: var(--nb-muted);
}

.nb-plan {
  container: nb-plan / inline-size;
  margin: 0;
}

.nb-plan-frame {
  position: relative;
}

.nb-plan-img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--nb-control);
}

.nb-plan-places {
  display: contents;
}

.nb-place-on {
  position: absolute;
  inset-inline-start: calc(var(--nb-x) * 0.1%);
  inset-block-start: calc(var(--nb-y) * 0.1%);
  transform: translate(-50%, -50%);
  min-inline-size: 44px;
  background: var(--nb-surface);
}

/* Over a photograph a taken place still needs a solid ground for its muted text. */
.nb-place-on[aria-disabled="true"] {
  background: var(--nb-surface);
}

/* Over a photograph the ink-coloured ring and edge can vanish: the chosen place keeps a light edge, and the
   keyboard ring is two-toned (a light outline inside a dark shadow), readable on a dark or a bright picture. */
.nb-place-on[aria-current="true"] {
  border-color: #fff;
}

.nb-widget .nb-place-on:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #1f1f1f;
}

/* "taken" in words next to the label, so the dashed edge is not the only sign (1.4.1). */
.nb-place-state {
  font-size: 0.85em;
  font-weight: 600;
}

.nb-place-on .nb-place-meta {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@container nb-plan (max-width: 479px) {
  .nb-plan-places {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nilda-space-2, 8px);
    margin-block-start: var(--nilda-space-2, 8px);
  }

  .nb-place-on {
    position: static;
    transform: none;
  }

  .nb-place-on .nb-place-meta {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

/* Places closer together than a button (the script measures it from the picture's own pixels) leave the
   picture and stack under it, like under 480px: nothing covers another's label or target (2.5.8). */
.nb-plan-stacked .nb-plan-places {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nilda-space-2, 8px);
  margin-block-start: var(--nilda-space-2, 8px);
}

.nb-plan-stacked .nb-place-on {
  position: static;
  transform: none;
}

.nb-plan-stacked .nb-place-on .nb-place-meta {
  position: static;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* A picture that failed to load: the same list, nothing placed on an empty box. */
.nb-plan-broken .nb-plan-img {
  display: none;
}

.nb-plan-broken .nb-plan-places {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nilda-space-2, 8px);
}

.nb-plan-broken .nb-place-on {
  position: static;
  transform: none;
}

/* inline-flex: the same 44px height for a button and for the manage page's links. */
.nb-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--nilda-space-4, 16px);
  padding-block: var(--nilda-space-2, 8px);
  background: var(--nb-ink);
  border: 1px solid var(--nb-ink);
  color: var(--nb-on-ink);
  font-weight: 600;
  text-decoration: none;
}

/* Busy, not disabled: a disabled button would drop the keyboard focus to the page. */
.nb-primary[aria-disabled="true"] {
  cursor: progress;
}

/* The secondary action beside a primary one (Cancel booking next to Change time). */
.nb-secondary {
  background: transparent;
  border-color: var(--nb-border);
  color: var(--nb-text);
}

.nb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nilda-space-3, 12px);
}

.nb-link,
.nb-back {
  padding: 0;
  background: none;
  border: 0;
  color: var(--nb-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nb-back {
  justify-self: start;
}

.nb-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nilda-space-2, 8px);
}

.nb-more[hidden] {
  display: none;
}

.nb-days .nb-day {
  flex: 0 0 auto;
}

.nb-sessions {
  display: grid;
  gap: var(--nilda-space-3, 12px);
}

.nb-session-day {
  display: grid;
  gap: var(--nilda-space-2, 8px);
}

.nb-session-day-title {
  margin: 0;
  font-size: 0.95em;
  font-weight: 600;
  color: var(--nb-muted);
}

.nb-session {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nilda-space-3, 12px);
  min-block-size: 44px;
  padding: var(--nilda-space-3, 12px) var(--nilda-space-4, 16px);
  font: inherit;
  text-align: start;
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-control);
  cursor: pointer;
}

.nb-session-time {
  font-weight: 600;
}

.nb-session-left {
  color: var(--nb-muted);
  font-size: 0.95em;
}

.nb-session-full {
  cursor: not-allowed;
  background: transparent;
  border-style: dashed;
  color: var(--nb-muted);
}

.nb-date,
.nb-more input,
.nb-form input,
.nb-form textarea,
.nb-form select,
.nb-compact select,
.nb-compact input {
  min-block-size: 44px;
  padding: var(--nilda-space-2, 8px) var(--nilda-space-3, 12px);
  font: inherit;
  color: var(--nb-text);
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-control);
  inline-size: 100%;
  box-sizing: border-box;
}

.nb-more input {
  inline-size: 6rem;
}

.nb-form {
  display: grid;
  gap: var(--nilda-space-2, 8px);
}

/* A label, its input and its error text: the error sits beside the label, never inside it. */
.nb-field {
  display: grid;
  gap: var(--nilda-space-1, 4px);
}

.nb-label {
  display: grid;
  gap: var(--nilda-space-1, 4px);
  font-weight: 600;
}

.nb-form input:focus-visible,
.nb-form textarea:focus-visible,
.nb-form select:focus-visible,
.nb-date:focus-visible,
.nb-compact select:focus-visible,
.nb-widget button:focus-visible,
.nb-page a:focus-visible,
.nb-page button:focus-visible {
  outline: 2px solid var(--nb-ring);
  outline-offset: 2px;
}

.nb-form [aria-invalid="true"] {
  border-color: #8a1c1c;
}

.nb-field-error {
  margin: 0;
  color: #8a1c1c;
  font-size: 0.9em;
}

.nb-terms {
  display: flex;
  align-items: start;
  gap: var(--nilda-space-2, 8px);
}

.nb-terms input {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  min-block-size: 0;
  margin-block-start: 0.15rem;
  flex: 0 0 auto;
}

.nb-terms-label {
  line-height: 1.45;
}

.nb-terms-text {
  margin: 0;
  color: var(--nb-muted);
  white-space: pre-line;
  line-height: 1.45;
}

/* The owner's privacy notice beside the submit button (B25): a link, or a disclosure opened in place. */
.nb-privacy {
  margin: 0;
  color: var(--nb-muted);
  line-height: 1.45;
}

.nb-privacy-title {
  cursor: pointer;
  text-decoration: underline;
}

.nb-privacy-text {
  margin: var(--nilda-space-2, 8px) 0 0;
}

.nb-banner {
  margin: 0;
  padding: var(--nilda-space-2, 8px) var(--nilda-space-3, 12px);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-control);
  background: var(--nb-surface);
}

.nb-result {
  margin: 0;
  line-height: 1.5;
}

.nb-paused {
  display: grid;
  gap: var(--nilda-space-2, 8px);
}

.nb-paused-title {
  margin: 0;
  font-weight: 600;
}

.nb-call-line {
  margin: 0;
}

.nb-call {
  color: var(--nb-ink);
  text-underline-offset: 3px;
}

/* Stay: dates, guests and room-type cards. */
.nb-stay-dates {
  display: grid;
  gap: var(--nilda-space-2, 8px);
}

.nb-chosen {
  margin: 0 0 var(--nilda-space-2, 8px);
  color: var(--nb-muted);
  font-size: 0.9375rem;
}

.nb-nights {
  margin: 0;
  color: var(--nb-muted);
  font-variant-numeric: tabular-nums;
}

.nb-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--nilda-space-2, 8px);
}

.nb-step-button {
  min-block-size: 44px;
  min-inline-size: 44px;
  font: inherit;
  color: inherit;
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-control);
  cursor: pointer;
}

.nb-step-button[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--nb-muted);
  border-style: dashed;
}

.nb-stepper-value {
  min-inline-size: 2rem;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nb-rooms {
  display: grid;
  gap: var(--nilda-space-3, 12px);
}

.nb-room {
  display: grid;
  gap: var(--nilda-space-2, 8px);
}

.nb-room-card {
  display: flex;
  align-items: flex-start;
  gap: var(--nilda-space-2, 8px);
}

.nb-room-card input {
  flex: 0 0 auto;
  margin-block-start: 0.35rem;
  accent-color: var(--nb-ink);
}

.nb-room-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nb-room-total {
  font-weight: 600;
}

.nb-room-reason {
  color: var(--nb-muted);
  font-size: 0.95em;
}

.nb-room-unavailable .nb-room-card {
  background: transparent;
  border-style: dashed;
  color: var(--nb-muted);
}

.nb-room-unavailable {
  cursor: not-allowed;
}

.nb-room-card.nb-selected,
.nb-room-card:has(input:checked) {
  background: var(--nb-ink);
  border-color: var(--nb-ink);
  color: var(--nb-on-ink);
}

.nb-room-card.nb-selected .nb-choice-note,
.nb-room-card.nb-selected .nb-choice-meta,
.nb-room-card.nb-selected .nb-room-total,
.nb-room-card:has(input:checked) .nb-choice-note,
.nb-room-card:has(input:checked) .nb-choice-meta,
.nb-room-card:has(input:checked) .nb-room-total {
  color: inherit;
}

.nb-room-nights {
  padding: var(--nilda-space-2, 8px) var(--nilda-space-3, 12px);
  background: var(--nb-surface);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-control);
}

.nb-room-nights-title {
  display: flex;
  align-items: center;
  min-block-size: 44px;
  cursor: pointer;
  font-weight: 600;
}

.nb-nights-list {
  display: grid;
  gap: var(--nilda-space-1, 4px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nb-nights-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--nilda-space-2, 8px);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 520px) {
  .nb-stay-dates {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 641px) {
  .nb-room {
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
    align-items: start;
  }

  .nb-room-card {
    grid-column: 1;
  }

  .nb-room-nights {
    grid-column: 2;
  }
}

/* The honeypot: invisible to a person, still in the layout for a bot. */
.nb-honey {
  position: absolute;
  inset-block-start: -1000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Compact layout: party, day and time in one row; wraps at 360px. */
.nb-compact {
  align-items: end;
}

.nb-compact-label {
  display: grid;
  gap: var(--nilda-space-1, 4px);
  flex: 1 1 7rem;
  min-inline-size: 7rem;
  font-weight: 600;
}

.nb-compact-go {
  flex: 0 0 auto;
}

.nb-compact-status {
  margin-block-start: var(--nilda-space-2, 8px);
}

@media (prefers-reduced-motion: reduce) {
  .nb-widget *,
  .nb-page * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* The standalone /booking page. */
.nb-page-main {
  max-inline-size: 640px;
  margin-inline: auto;
  padding: 16px;
}

.nb-page h1 {
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.2;
}

.nb-page .nb-back {
  margin-block: 0 var(--nilda-space-4, 16px);
}

/* The guest pages' "Back to <site>" link: the stylesheet paints it, not the browser's default blue. */
.nb-page .nb-back a {
  color: var(--nb-muted);
  text-underline-offset: 3px;
}