/*
 * Tourila – components (0.644)
 *
 * One rule set per thing that looks the same everywhere: Studio, preview, public travel page, public website.
 * Loaded right after tokens.css on every page that shows them (Tourila_Assets: Studio, travel page, Tourila UI;
 * dev/build-public.js: travel-page.min.css and public.min.css). Values come from tokens.css only.
 *
 * A component carries its look; the window or bar that uses it keeps only where it sits (position, margin, order).
 * Markup: PHP Tourila_UI, JS TourilaHelpers (assets/js/shared/helpers.js) – the same markup from both.
 */

/* ------------------------------------------------------------------ Schließen-X
 * <button class="tu-close [tu-close--sm|--md] [tu-close--soft|--glass|--on-dark|--on-photo|--raised]">
 * Sizes: 44 (default, every window), 36 (--md: small windows and boxes), 28 (--sm: help bubbles).
 * Surfaces: none (default) · soft (mist, on white) · glass (white glass over pictures, with a shadow) ·
 * on-dark (light glass on a dark backdrop: picture viewers) · on-photo (dark glass over photos and videos: reels) ·
 * raised (white with a line and a shadow: a page of its own). */
.tu-close {
  --tu-close-size: 44px;
  --tu-close-icon: 20px;
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  background: var(--tu-close-bg, transparent);
  border: var(--tu-close-border, 0);
  border-radius: var(--tu-radius-pill);
  box-shadow: var(--tu-close-shadow, none);
  box-sizing: border-box;
  color: var(--tu-close-ink, var(--tu-ink));
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: inherit;
  height: var(--tu-close-size);
  justify-content: center;
  padding: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  width: var(--tu-close-size);
}
/* Hover only under a pointer (a tapped X on a phone does not stay grey); the keyboard always sees it. */
@media (hover: hover) {
  .tu-close:hover {
    background: var(--tu-close-hover, var(--tu-mist));
  }
  .tu-close--raised:hover {
    border-color: var(--tu-ink);
  }
}
.tu-close:focus-visible {
  background: var(--tu-close-hover, var(--tu-mist));
}
.tu-close svg {
  display: block;
  fill: none;
  flex: none;
  height: var(--tu-close-icon);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: var(--tu-close-icon);
}
.tu-close--md {
  --tu-close-size: 36px;
}
.tu-close--sm {
  --tu-close-size: 28px;
  --tu-close-icon: 16px;
}
.tu-close--soft {
  --tu-close-bg: var(--tu-mist);
  --tu-close-hover: var(--tu-line);
}
.tu-close--glass {
  --tu-close-bg: var(--tu-white-a92);
  --tu-close-hover: var(--tu-surface);
  --tu-close-shadow: 0 2px 10px var(--tu-black-a16);
}
.tu-close--on-dark {
  --tu-close-bg: var(--tu-white-a12);
  --tu-close-hover: var(--tu-white-a22);
  --tu-close-ink: var(--tu-on-dark);
}
.tu-close--on-photo {
  --tu-close-bg: var(--tu-black-a30);
  --tu-close-hover: var(--tu-black-a50);
  --tu-close-ink: var(--tu-on-dark);
  --tu-close-icon: 22px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.tu-close--raised {
  --tu-close-bg: var(--tu-surface);
  --tu-close-hover: var(--tu-surface);
  --tu-close-border: 1px solid var(--tu-line);
  --tu-close-shadow: var(--tu-shadow-field);
}

/* ------------------------------------------------------------------ Buttons
 * <button class="tu-button [tu-button--primary|--dark|--danger|--ghost|--link|--icon] [--small|--large|--block]">
 * Default: white with a line (secondary). One set for Studio and website; the Studio is denser and has corners of
 * 12 px instead of the pill (decision 12.11.2026) – it sets only the values (studio.css › .ts-studio), no rules.
 * The preview inside the Studio is the website (studio.css › .ts-studio .ts-preview).
 * 0.644.3: the colours are values. A variant sets them on the button; a place that needs another surface (glass on a
 * photo, white words on a dark box) sets the same values on its buttons – never the properties:
 *   --tu-button-bg, --tu-button-line, --tu-button-ink            at rest
 *   --tu-button-bg-hover, --tu-button-line-hover   under the pointer (--tu-button-ink-hover: only the icon button)
 *   --tu-button-blur                                             a backdrop filter (glass), default none
 * Sizes are values too: --tu-button-h (height), --tu-button-text (size of the words), --tu-button-pad (side space). */
.tu-button {
  --tu-button-h: var(--tu-control-h);
  align-items: center;
  -webkit-backdrop-filter: var(--tu-button-blur, none);
  backdrop-filter: var(--tu-button-blur, none);
  background: var(--tu-button-bg, var(--tu-surface));
  border: 1px solid var(--tu-button-line, var(--tu-line-strong));
  border-radius: var(--tu-button-radius, var(--tu-radius-pill));
  box-sizing: border-box;
  color: var(--tu-button-ink, var(--tu-ink));
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--tu-button-text, var(--tu-text-md));
  font-weight: var(--tu-control-weight, var(--tu-weight-semibold));
  gap: var(--tu-space-2);
  justify-content: center;
  /* Studio: 1; elsewhere the line height of the text around (no fallback: the declaration then inherits). */
  line-height: var(--tu-button-leading);
  min-height: var(--tu-button-h);
  padding: 0 var(--tu-button-pad, var(--tu-space-5));
  text-decoration: none;
  transition: background-color var(--tu-fast) var(--tu-ease), border-color var(--tu-fast) var(--tu-ease), color var(--tu-fast) var(--tu-ease);
  white-space: nowrap;
}
.tu-button:hover {
  background: var(--tu-button-bg-hover, var(--tu-mist));
  border-color: var(--tu-button-line-hover, var(--tu-ink));
}
.tu-button--primary {
  --tu-button-bg: var(--tu-brand);
  --tu-button-line: var(--tu-brand);
  --tu-button-ink: var(--tu-on-dark);
  --tu-button-bg-hover: var(--tu-brand-strong);
  --tu-button-line-hover: var(--tu-brand-strong);
}
.tu-button--dark {
  --tu-button-bg: var(--tu-ink);
  --tu-button-line: var(--tu-ink);
  --tu-button-ink: var(--tu-on-dark);
  --tu-button-bg-hover: var(--tu-black);
  --tu-button-line-hover: var(--tu-black);
}
.tu-button--danger {
  --tu-button-bg: var(--tu-danger);
  --tu-button-line: var(--tu-danger);
  --tu-button-ink: var(--tu-on-dark);
  --tu-button-bg-hover: var(--tu-danger-strong);
  --tu-button-line-hover: var(--tu-danger-strong);
}
/* Quiet: no surface until the pointer is over it (toolbars, "Abbrechen"). */
.tu-button--ghost {
  --tu-button-bg: transparent;
  --tu-button-line: transparent;
  --tu-button-ink: var(--tu-text);
  --tu-button-bg-hover: var(--tu-surface-hover);
  --tu-button-line-hover: transparent;
}
/* A text action: underlined, no surface ("Alles zurücksetzen", "Überspringen", "Vorschlag übernehmen"). */
.tu-button--link {
  --tu-button-h: var(--tu-button-link-h, var(--tu-control-h));
  --tu-button-bg: none;
  --tu-button-bg-hover: none;
  --tu-button-line-hover: transparent;
  border: 0;
  font-weight: var(--tu-weight-bold);
  justify-content: flex-start;
  justify-self: start;
  line-height: inherit;
  padding-inline: 2px;
  text-decoration: underline;
  text-decoration-color: var(--tu-line-strong);
  text-underline-offset: 4px;
  white-space: normal;
}
.tu-button--link:hover {
  text-decoration-color: currentColor;
}
/* 0.644.3: a link inside a sentence ("inkl. MwSt. · Details", "Ändern"): the colour, size and weight of the words
 * around (or --tu-button-text, --tu-button-weight), no height of its own. */
.tu-button--link.tu-button--inline {
  --tu-button-h: 0;
  --tu-button-ink: currentColor;
  display: inline-block;
  font-size: var(--tu-button-text, inherit);
  font-weight: var(--tu-button-weight, inherit);
  padding: 0;
  text-underline-offset: 3px;
}
/* Only a symbol: square, quiet, grey until hovered or open. */
.tu-button--icon {
  --tu-button-bg: transparent;
  --tu-button-line: transparent;
  --tu-button-ink: var(--tu-muted);
  --tu-button-bg-hover: var(--tu-surface-hover);
  --tu-button-line-hover: transparent;
  --tu-button-ink-hover: var(--tu-ink);
  padding: 0;
  width: var(--tu-button-h);
}
.tu-button--icon:hover {
  color: var(--tu-button-ink-hover);
}
.tu-button--icon.is-active,
.tu-button--icon[aria-expanded="true"] {
  --tu-button-bg: var(--tu-surface-hover);
  --tu-button-ink: var(--tu-ink);
}
/* An icon button that removes something turns red under the pointer. */
.tu-button--icon.tu-button--danger-hover {
  --tu-button-bg-hover: var(--tu-danger-soft);
  --tu-button-ink-hover: var(--tu-danger);
}
.tu-button--small {
  --tu-button-h: 36px;
  font-size: var(--tu-button-text-sm, var(--tu-text-sm));
  padding-inline: var(--tu-space-3);
}
.tu-button--large {
  --tu-button-h: var(--tu-control-h-lg);
  font-size: var(--tu-button-text-lg, var(--tu-text-base));
  padding-inline: var(--tu-space-6);
}
.tu-button--block {
  --tu-button-h: var(--tu-control-h-lg);
  width: 100%;
}
.tu-button--icon.tu-button--small {
  padding: 0;
}
/* 0.644.3: a hidden button stays hidden (the display above would show it). */
.tu-button[hidden] {
  display: none;
}
.tu-button:disabled,
.tu-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* ------------------------------------------------------------------ Zahl (count)
 * <span class="tu-count [tu-count--small] [tu-count--dark]">3</span> – unread messages, wish list, filters.
 * 20 px (default), 16 px (--small: the tab bar, the narrow sidebar). The place (top/right) stays with the bar. */
.tu-count {
  --tu-count-h: 20px;
  align-items: center;
  background: var(--tu-brand);
  border-radius: var(--tu-radius-pill);
  box-sizing: border-box;
  color: var(--tu-on-dark);
  display: inline-flex;
  flex: none;
  font-size: var(--tu-count-text, var(--tu-text-xs));
  font-variant-numeric: tabular-nums;
  font-weight: var(--tu-weight-bold);
  height: var(--tu-count-h);
  justify-content: center;
  line-height: 1;
  min-width: var(--tu-count-h);
  padding: 0 calc(var(--tu-count-h) * 0.3);
}
.tu-count[hidden] {
  display: none;
}
.tu-count--small {
  --tu-count-h: 16px;
  --tu-count-text: 10px;
}
.tu-count--dark {
  background: var(--tu-ink);
}

/* ------------------------------------------------------------------ Badge
 * <span class="tu-badge tu-badge--{neutral|brand|success|warning|danger|info|dark} [tu-badge--large]">Entwurf</span>
 * A state or a short fact as a word. Markup: Tourila_UI::badge (PHP), TourilaHelpers.badge (JS). */
.tu-badge {
  align-items: center;
  background: var(--tu-surface-hover);
  border-radius: var(--tu-radius-pill);
  color: var(--tu-text);
  display: inline-flex;
  font-size: var(--tu-badge-text, var(--tu-text-xs));
  font-style: normal;
  font-weight: var(--tu-control-weight, var(--tu-weight-semibold));
  gap: var(--tu-space-1);
  line-height: 1;
  padding: 5px 9px;
  white-space: nowrap;
}
.tu-badge--brand {
  background: var(--tu-brand-soft);
  color: var(--tu-brand-strong);
}
.tu-badge--success {
  background: var(--tu-success-soft);
  color: var(--tu-success);
}
.tu-badge--warning {
  background: var(--tu-warning-soft);
  color: var(--tu-warning);
}
.tu-badge--danger {
  background: var(--tu-danger-soft);
  color: var(--tu-danger);
}
.tu-badge--info {
  background: var(--tu-info-soft);
  color: var(--tu-info);
}
.tu-badge--dark {
  background: var(--tu-ink);
  color: var(--tu-on-dark);
}
/* With a symbol and a sentence (the review form: "Dieser Text wird öffentlich angezeigt"). */
.tu-badge--large {
  --tu-badge-text: var(--tu-text-sm);
  gap: var(--tu-space-2);
  line-height: 1.3;
  padding: 6px 12px;
  white-space: normal;
}
.tu-badge--large svg {
  flex: none;
  height: 16px;
  width: 16px;
}

/* ------------------------------------------------------------------ Chips
 * <a|button|label class="tu-chip [tu-chip--small|--large] [tu-chip--ask|--understood|--word]"> in <ul class="tu-chips">
 * A choice or a filter (chosen: dark, aria-current or a checked radio before it), a suggestion to add (--ask:
 * dashed), a part of the question the search understood (--understood). */
.tu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tu-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tu-chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.tu-chips--scroll::-webkit-scrollbar {
  display: none;
}
.tu-chip {
  align-items: center;
  background: var(--tu-surface);
  border: 1px solid var(--tu-line-strong);
  border-radius: var(--tu-radius-pill);
  color: var(--tu-ink);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font-size: var(--tu-text-md);
  font-weight: var(--tu-weight-medium);
  gap: var(--tu-space-2);
  min-height: 40px;
  padding: 0 var(--tu-space-4);
  text-decoration: none;
  transition: border-color var(--tu-fast) var(--tu-ease), background-color var(--tu-fast) var(--tu-ease);
  white-space: nowrap;
}
.tu-chip:hover {
  border-color: var(--tu-ink);
}
.tu-chip[aria-current="true"],
.tu-chip.is-active,
input:checked + .tu-chip {
  background: var(--tu-ink);
  border-color: var(--tu-ink);
  color: var(--tu-on-dark);
}
input:focus-visible + .tu-chip {
  outline: var(--tu-focus-width) solid var(--tu-focus-color);
  outline-offset: var(--tu-focus-offset);
}
.tu-chip small {
  color: inherit;
  font-size: var(--tu-text-sm);
  opacity: 0.66;
}
.tu-chip--understood {
  background: var(--tu-mist);
  border-color: transparent;
  cursor: default;
  padding-right: var(--tu-space-1);
}
.tu-chip--understood:hover {
  border-color: transparent;
}
.tu-chip--word {
  background: var(--tu-surface);
  border-color: var(--tu-line);
  color: var(--tu-muted);
}
.tu-chip--ask {
  border-style: dashed;
  min-height: 36px;
  text-decoration: none;
}
.tu-chip--ask:hover {
  background: var(--tu-mist);
  border-style: solid;
}
/* Small sizes of a chip: in bars and sheets (36), suggestions to add in the editor (44: --large). */
.tu-chip--small {
  font-size: var(--tu-text-sm);
  min-height: 36px;
  padding: 0 var(--tu-space-3);
}
.tu-chip--large {
  min-height: var(--tu-control-h);
}
.tu-chip > svg {
  flex: none;
  height: 16px;
  width: 16px;
}
/* ------------------------------------------------------------------ Tag
 * <span class="tu-tag [tu-tag--small]">Meerblick</span> – a fact in a row of facts, not clickable (highlights,
 * what changed, the provider's languages, the amenities of a room). */
.tu-tag {
  align-items: center;
  background: var(--tu-mist);
  border-radius: var(--tu-radius-pill);
  color: var(--tu-text);
  display: inline-flex;
  font-size: var(--tu-text-sm);
  font-weight: var(--tu-weight-medium);
  gap: var(--tu-space-2);
  height: 28px;
  padding: 0 12px;
  white-space: nowrap;
}
.tu-tag--small {
  font-size: var(--tu-text-xs);
  height: 24px;
  padding: 0 10px;
}
.tu-tag > svg {
  flex: none;
  height: 16px;
  width: 16px;
}

/* ------------------------------------------------------------------ Fenster (0.644.2)
 * <dialog class="tu-dialog [tu-dialog--box|--full]"> opened with TourilaHelpers.dialog.open() (showModal: top layer,
 * the page beneath inert). One look for every window:
 * - the scrim is the dialog's ::backdrop (the same tint and blur everywhere; it fades in with .is-open); a click on it
 *   closes (option backdrop);
 * - the panel (tu-dialog__panel): surface, corner, shadow. The window keeps only where it sits and how large it is.
 * Forms: a layer (default – the dialog covers the screen, its panel sits in it: in the middle, a sheet from below, a
 * side panel), a box (--box – the dialog is the panel itself, in the middle) and a full window (--full – the window
 * covers everything: request, preview of the editor, Reels, a picture large; no scrim).
 * Values: --tu-dialog-scrim, --tu-dialog-blur, --tu-dialog-radius (layer 28, box 22; --tu-window-radius of the Studio 20),
 * --tu-dialog-shadow. */
.tu-dialog {
  --tu-dialog-scrim: var(--tu-scrim);
  --tu-dialog-blur: 3px;
  --tu-dialog-radius: var(--tu-window-radius, var(--tu-radius-2xl));
  --tu-dialog-shadow: var(--tu-shadow-lg);
}
.tu-dialog--box {
  --tu-dialog-radius: var(--tu-window-radius, var(--tu-radius-xl));
}
:where(dialog.tu-dialog:not(.tu-dialog--box)) {
  background: transparent;
  border: 0;
  color: inherit;
  height: auto;
  inset: 0;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: visible;
  padding: 0;
  position: fixed;
  /* as a <div>: the browser makes the text of a modal dialog selectable and drops the isolation of a block */
  unicode-bidi: isolate;
  -webkit-user-select: auto;
  user-select: auto;
  width: auto;
}
dialog.tu-dialog::backdrop {
  -webkit-backdrop-filter: blur(var(--tu-dialog-blur));
  backdrop-filter: blur(var(--tu-dialog-blur));
  background: var(--tu-dialog-scrim);
  opacity: 0;
  transition: opacity var(--tu-base) var(--tu-ease);
}
dialog.tu-dialog.is-open::backdrop {
  opacity: 1;
}
dialog.tu-dialog--full::backdrop {
  display: none;
}
.tu-dialog__panel,
dialog.tu-dialog--box {
  background: var(--tu-surface);
  border: 0;
  border-radius: var(--tu-dialog-radius);
  box-shadow: var(--tu-dialog-shadow);
}
.tu-dialog__panel {
  position: relative;
}
/* A sheet from below (Mehr): the shadow goes up. A side panel (the menu): no corners. Windows that become a sheet only
   on a phone round their top corners there (var(--tu-dialog-radius) var(--tu-dialog-radius) 0 0). */
.tu-dialog--sheet {
  --tu-dialog-shadow: 0 -12px 40px var(--tu-black-a16);
}
.tu-dialog--side {
  --tu-dialog-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  dialog.tu-dialog::backdrop {
    transition: none;
  }
}
dialog.tu-dialog:not([open]) {
  display: none !important;
}
/* The one scroll lock: while a window is open the page beneath stays where it is. Where the page had a scroll bar it
   keeps its width as a padding (--tu-scrollbar) – nothing beneath moves sideways. */
html.tu-scroll-locked {
  overflow: hidden;
}
html.tu-scroll-locked body {
  padding-right: var(--tu-scrollbar, 0px);
}