/* wwwroot/styles/General/bootstrap-overrides.css */
/* ---------------------------------------------------------------------------
   Bootstrap overrides — brand colours for Bootstrap's own tokens plus the two
   global resets the whole app is written against.

   Deliberately small. Bootstrap's defaults are fine for the current design
   language; page and component stylesheets state what they need themselves.
   --------------------------------------------------------------------------- */

:root {
    --bs-primary: var(--green);
    --bs-secondary: var(--brown);
    --bs-success: var(--green);
    --bs-danger: var(--red);
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    /* Links. Bootstrap 5.3 paints `a` from the rgb triplets, not from the plain
       colours: `color: rgba(var(--bs-link-color-rgb), …)`, and `a:hover` swaps in
       `--bs-link-hover-color-rgb`. The plain colours only reach .nav, .pagination
       and .btn-link. A triplet cannot be read out of a custom property at runtime,
       so the two below are written out by hand — keep them in step with --green
       and --dark-green in variables.css. */
    --bs-link-color: var(--green);
    --bs-link-color-rgb: 34, 139, 34; /* = --green */
    --bs-link-hover-color: var(--dark-green);
    --bs-link-hover-color-rgb: 32, 104, 21; /* = --dark-green */
}

/* No `color` here on purpose. This rule used to paint everything
   `var(--color-font)` — white — for the original dark layout, and as an element
   selector on `a` and `li` it beat any colour inherited from a card, so every
   list and link on today's white surfaces had to re-state its own. Anything
   standing on a dark fill now says so where the fill is defined (.greyBox,
   .textBox, the header and the footer).

   The two resets stay: roughly a dozen lists across the header, drawer, footer
   and account pages rely on the global `list-style: none`, and links are
   undecorated everywhere by design. */
body, a, li {
    font-family: var(--font);
    text-decoration: none;
    list-style: none;
}

/* Bootstrap's reboot writes `b, strong { font-weight: bolder }`, which is
   relative to the parent: inside a row that is already 600 (a receipt's sum
   line, a card title) it resolves to 900. The site loads no webfont, so
   `--font` falls back to Arial and 900 is served by Arial Black — amounts in
   <b> then looked like a different typeface. A fixed 700 keeps every bold
   amount in plain Arial Bold; classes that want another weight still set it. */
b, strong {
    font-weight: 700;
}

/* Confirmation dialogs (HxMessageBox, the only modals in the app).

   Bootstrap compiles `.btn-primary` with the button colours baked into its own
   `--bs-btn-*` variables — Havit's blue, not `--bs-primary` — so the remap above
   never reached the dialog's confirming button. The tokens go back through the
   brand theme here, which means the button follows whichever accommodation is
   being viewed (green / brown) exactly like the rest of the page.

   Only the primary button: the dialogs that confirm a delete or a cancellation
   ask for `ThemeColor.Danger` explicitly and stay red on purpose. */
.modal .btn-primary {
    --bs-btn-bg: var(--theme-color);
    --bs-btn-border-color: var(--theme-color);
    --bs-btn-hover-bg: var(--theme-strong);
    --bs-btn-hover-border-color: var(--theme-strong);
    --bs-btn-active-bg: var(--theme-strong);
    --bs-btn-active-border-color: var(--theme-strong);
    --bs-btn-disabled-bg: var(--theme-color);
    --bs-btn-disabled-border-color: var(--theme-color);
}

/* Bootstrap's focus ring is an rgb triplet it mixes itself, and the brand
   tokens are plain colours — the ring is stated outright instead. */
.modal .btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--theme-tint);
}

/* Bootstrap puts a warning glyph inside invalid inputs, which collides with the
   admin forms' own layout (and with Havit's date and select controls). Only the
   icon goes — the red border stays, it is the whole signal. */
.form-control.is-invalid {
    background-image: none !important;
    padding-right: inherit;
}

/* Loading spinners (Havit's HxSpinner and the plain `.spinner-border` spans).

   Asking for `ThemeColor.Primary` compiles to Bootstrap's `.text-primary`,
   which resolves through `--bs-primary-rgb` — a triplet Bootstrap mixes from
   its own blue and which the `--bs-primary` remap above never reaches — so the
   spinners stayed blue while the rest of the page followed the accommodation.
   Bootstrap writes `.text-primary` with `!important`, hence the same here.

   Only the spinners that ask for the brand colour outright: the `.spinner-border`
   spans inside buttons and cards inherit `currentColor` on purpose, so they stay
   readable on whatever fill they sit on. */
.spinner-border.text-primary {
    color: var(--theme-color) !important;
}

/* wwwroot/styles/Layout/layout.css */
/* The header used to be `position: fixed`, so the page had to reserve its height here
   (10.5rem and a different value per breakpoint). It is `position: sticky` now — it
   occupies its own space in the flow — so this is plain breathing room below it. */
.content {
    width: 100%;
    max-width: 1150px;
    min-height: 30vh;
    margin: var(--element-spacing-mobile) auto 0 auto;
}

/* Every jump to an element — a fragment link, scrollIntoView — stops below the sticky
   header instead of underneath it. The header's height depends on who is signed in
   (one role bar per role) and on the breakpoint, so site.js measures it into
   --site-header-height; a fixed scroll-margin per page can never be right. */
html {
    scroll-padding-top: var(--site-header-height, 0px);
}

.no-scroll {
    overflow: hidden;
}

/* A photo carries its pixel size in width/height (IResponsiveImageHelper), so the browser keeps
   the room free before the file arrives and the page does not jump. The attributes also act as
   CSS sizes, though: without this a 1920x1440 photo in a box that only sets its width would be
   drawn 1440px tall. :where() keeps the specificity at zero, so every component rule that sizes
   its photo still wins. */
:where(img[width][height]) {
    height: auto;
}

h1:focus {
    outline: none;
}

/* Filled brand box: solid brand background (+ light text). The brand tokens
   themselves are defined once in variables.css; here the class only paints the
   fill. Use the [data-theme] attribute instead when you want the tokens WITHOUT
   a full background. */
.green,
.brown {
    background: var(--theme-color);
}

.red {
    background: var(--red);
}

@media only screen and (min-width: 400px) and (max-width: 992px) {

    .content {
        margin: var(--element-spacing-tablet) auto 0 auto;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .content {
        margin: var(--element-spacing-notebook) auto 0 auto;
    }
}

@media only screen and (min-width: 1200px) {

    .content {
        margin: var(--element-spacing-computer) auto 0 auto;
    }

    .form {
        margin: 0 auto var(--element-spacing-computer) auto;
    }
}

/* wwwroot/styles/Layout/header.css */
/* ════════════════════════════════════════════════════════════════════════════════
   SITE HEADER

   Layout (>= 992px)                         Layout (< 992px)
     ┌ role bar(s)   — neutral slate  ┐        ┌ main bar — white, sticky ┐
     ├ utility strip — brand gradient ┤        └ everything else lives in ┘
     └ main bar      — white          ┘          the slide-over drawer

   Global, not scoped: the header is assembled from five components (LanguageSwitcher,
   AccommodationSwitcher, CapacityBadge, RoleNavStrip, RoleNavDrawerSection) and scoped
   CSS would mean a ::deep chain for each. Everything is namespaced under .site-header /
   .drw / .hdr-scrim, so nothing leaks.

   Brand colour arrives exclusively through the tokens the [data-theme] attribute on
   <header> supplies (--theme-color / -strong / -tint) — Chalupa reads green, Roubenka
   brown, and a fourth object needs only its BrandTheme row.

   Every colour is stated explicitly: `body, a, li` in bootstrap-overrides.css paints
   text WHITE for the old dark layout, so a light surface must override it per element.
   ════════════════════════════════════════════════════════════════════════════════ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .07), 0 10px 30px -28px rgba(0, 0, 0, .8);
}

.site-header a {
    text-decoration: none;
}

/* ── 1. Utility strip ──────────────────────────────────────────────────────────
   The band that says "green house" / "brown house" at a glance. Desktop only; on a
   phone its three jobs (contact, objects, language) move into the drawer. */

.hdr-utility {
    display: none;
    background: linear-gradient(90deg, var(--theme-color), var(--theme-strong));
}

.hdr-utility-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.hdr-utility-contact {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    min-width: 0;
}

/* The capacity pill leads the strip, ahead of the phone and the address: it is a fact about the
   house, not a way of reaching it. This band has the width the white bar below does not. */
.hdr-utility-capacity {
    flex: 0 0 auto;
}

    .hdr-utility-contact a {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        color: rgba(255, 255, 255, .88);
        font-size: .82rem;
        line-height: 2.25rem;
        /* A phone number broken after its third group or an address broken at the hyphen
           reads as two facts, and doubles the strip's height. The narrow-desktop band at the
           bottom of this file makes sure one line always fits. */
        white-space: nowrap;
        transition: color .2s ease;
    }

        .hdr-utility-contact a:hover {
            color: #fff;
        }

.hdr-utility-tools {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Sign in / register, shown to anonymous visitors only. Sits on the brand gradient, so it
   is painted in white the same way the contact links above it are — a signed-in visitor
   sees the role bar instead and this whole block is absent. */
.hdr-auth {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding-right: .65rem;
    margin-right: .35rem;
    border-right: 1px solid rgba(255, 255, 255, .25);
}

/* Both links carry the same box — fixed height, no leading of their own and a border that
   is merely transparent on the plain one — so the outline pill cannot grow taller than the
   link beside it and both baselines sit on the strip's centre line. */
.hdr-auth-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 1.6rem;
    padding: 0 .6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .88);
    font-size: .78rem;
    line-height: 1;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

    .hdr-auth-link:hover {
        background: rgba(255, 255, 255, .16);
        color: #fff;
    }

    /* Registering is the call to action of the pair; an outline rather than a solid pill so
       it never competes with the "Rezervovat" button one band below it. */
    .hdr-auth-link.is-strong {
        padding: 0 .85rem;
        border-color: rgba(255, 255, 255, .5);
        font-weight: 600;
    }

        .hdr-auth-link.is-strong:hover {
            border-color: #fff;
        }

/* ── 2. Main bar ───────────────────────────────────────────────────────────────── */

.hdr-main-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 1150px;
    margin: 0 auto;
    padding: .6rem 1rem;
    box-sizing: border-box;
}

/* Wordmark ------------------------------------------------------------------- */

.hdr-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    margin-right: auto;
}

/* The mark itself is the accommodation's logo — see Components/accommodationLogo.css
   (`.acc-logo.is-brand`). It is deliberately outside the link and has no states of its
   own: the brand mark looks identical whatever the pointer does. */

.hdr-brand-name {
    color: #2f2f2f;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hdr-brand-name:hover {
    color: var(--theme-strong);
}

/* Primary navigation --------------------------------------------------------- */

.hdr-nav {
    display: none;
}

    /* No spacing between the items and none inside them beyond what keeps the hit target
       comfortable: `.hdr-main-inner` is capped at 1150px, so this row never gets more than
       1102px of content width however wide the window is. Loose menu spacing has nothing to
       buy at any viewport and costs the wordmark its last legible characters — the German
       menu alone is 647px of that budget. */
    .hdr-nav ul {
        display: flex;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 0;
    }

.hdr-nav-link {
    position: relative;
    display: block;
    padding: .5rem .5rem;
    color: #5f5e5a;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color .2s ease;
}

    /* Brand underline for the current section — the only "you are here" marker,
       so it must not rely on colour alone being noticed. */
    .hdr-nav-link::after {
        content: "";
        position: absolute;
        left: .5rem;
        right: .5rem;
        bottom: .15rem;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--theme-color), var(--theme-strong));
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .25s ease;
    }

    .hdr-nav-link:hover {
        color: var(--theme-strong);
    }

        .hdr-nav-link:hover::after,
        .hdr-nav-link.active::after {
            transform: scaleX(1);
        }

    .hdr-nav-link.active {
        color: var(--theme-strong);
    }

/* Actions -------------------------------------------------------------------- */

.hdr-main-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.hdr-cta {
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    background: var(--theme-color);
    border-radius: 999px;
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 12px 22px -16px var(--theme-strong);
    transition: background-color .25s ease, transform .25s ease;
}

    .hdr-cta:hover {
        background: var(--theme-strong);
        color: #fff;
        transform: translateY(-1px);
    }

/* Hamburger ------------------------------------------------------------------ */

.hdr-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.7rem;
    height: 2.7rem;
    padding: 0 .65rem;
    background: var(--theme-tint);
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.hdr-burger-bar {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--theme-strong);
    transition: transform .3s ease, opacity .2s ease;
}

/* Morph into a cross while the drawer is open. */
.hdr-burger.is-open .hdr-burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hdr-burger.is-open .hdr-burger-bar:nth-child(2) {
    opacity: 0;
}

.hdr-burger.is-open .hdr-burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Language switcher ─────────────────────────────────────────────────────────
   Compact flag strip on the brand band; a wider labelled row inside the drawer. */

.lang-switch {
    display: flex;
    align-items: center;
    gap: .15rem;
}

.lang-opt {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .5rem;
    background: none;
    border: 0;
    border-radius: 999px;
    color: rgba(255, 255, 255, .8);
    font-family: inherit;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    /* A link (so crawlers reach every language), sized like the button it used to be:
       the drawer sits outside .site-header and its underline reset. */
    line-height: normal;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

    .lang-opt:hover {
        background: rgba(255, 255, 255, .16);
        color: #fff;
    }

    .lang-opt.is-active {
        background: rgba(255, 255, 255, .22);
        color: #fff;
    }

.lang-flag {
    width: 1.15rem;
    height: auto;
    display: block;
    border-radius: 2px;
    opacity: .85;
}

.lang-opt.is-active .lang-flag,
.lang-opt:hover .lang-flag {
    opacity: 1;
}

/* Drawer variant sits on white, so the palette flips. */
.lang-switch.is-inline {
    gap: .4rem;
}

    .lang-switch.is-inline .lang-opt {
        flex: 1 1 0;
        justify-content: center;
        padding: .55rem .5rem;
        background: #f6f5f2;
        color: #5f5e5a;
        font-size: .8rem;
    }

        .lang-switch.is-inline .lang-opt:hover {
            background: var(--theme-tint);
            color: var(--theme-strong);
        }

        .lang-switch.is-inline .lang-opt.is-active {
            background: var(--theme-color);
            color: #fff;
        }

    .lang-switch.is-inline .lang-flag {
        width: 1.3rem;
    }

/* ── Object switcher ───────────────────────────────────────────────────────────
   Dropdown on the brand band (desktop), plain list in the drawer. Opened by hover
   and by :focus-within, so it works with a keyboard and needs no JavaScript; the
   dropdown form is desktop-only, where there is no touch device to trap. */

.acc-switch {
    position: relative;
}

.acc-switch-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .75rem;
    background: rgba(255, 255, 255, .14);
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease;
}

    .acc-switch-toggle:hover {
        background: rgba(255, 255, 255, .24);
    }

.acc-switch-caret {
    font-size: .65rem;
    transition: transform .25s ease;
}

.acc-switch:hover .acc-switch-caret,
.acc-switch:focus-within .acc-switch-caret {
    transform: rotate(180deg);
}

.acc-switch-panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 20;
    width: 24rem;
    max-width: calc(100vw - 2rem);
    padding: 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 18px;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

    /* Invisible bridge so the pointer can cross the gap without the panel closing. */
    .acc-switch-panel::before {
        content: "";
        position: absolute;
        top: -.5rem;
        left: 0;
        right: 0;
        height: .5rem;
    }

.acc-switch:hover .acc-switch-panel,
.acc-switch:focus-within .acc-switch-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.acc-switch-lead {
    margin: 0 0 .75rem;
    color: #8a8a85;
    font-size: .78rem;
}

.acc-switch-list {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 0;
    padding: 0;
}

.acc-switch-entry {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem .75rem;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    background: #fff;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

    a.acc-switch-entry:hover {
        background: var(--theme-tint);
        border-color: var(--theme-color);
        transform: translateX(2px);
    }

    .acc-switch-entry.is-current {
        background: var(--theme-tint);
        border-color: var(--theme-color);
    }

/* Each row leads with that object's own logo, ringed in its own brand tint
   (`.acc-logo.is-switch`) — that is what tells the visitor the other house is a
   different, equally branded place. */

.acc-switch-copy {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin-right: auto;
}

.acc-switch-name {
    color: #2f2f2f;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.25;
}

.acc-switch-note {
    color: #8a8a85;
    font-size: .74rem;
}

.acc-switch-capacity {
    flex: 0 0 auto;
}

/* ── 3. Role bars (admin today, guest later) ───────────────────────────────────
   Neutral slate on purpose: this is an application layer, not the public site. */

.hdr-role {
    display: none;
    background: #2f3033;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

/* One row, deliberately: `nowrap` on both levels is the rule the menu tree is built to obey, and
   RoleNavMapper is written to the budget it implies. The binding case is not this 1150px cap and
   not Czech: it is German at a 992px window, where the compression band below applies and the home
   link has shrunk to its icon (plus the count of waiting work). Measured there, the nav has ~869px
   and a full administrator's eight German labels take ~840 (Czech 788) — no room for another label.
   A further area of the application becomes a section inside an existing dropdown rather than
   another label out here.
   A wrapped bar was the previous behaviour and it cost the header a third of its height on every
   admin page; overflowing instead — which is what nowrap does when the labels do not fit — puts a
   horizontal scrollbar on every admin page, so neither is a fallback. */
.hdr-role-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem .75rem;
    max-width: 1150px;
    margin: 0 auto;
    padding: .25rem 1.5rem;
    box-sizing: border-box;
}

.hdr-role-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding-right: .9rem;
    border-right: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .5);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* The bar's landing page, in the slot the caption would take. It is not one of the groups and
   does not count against their budget — see RoleNavMapper — which is exactly why it looks like
   the caption rather than like a menu item: a reader should not go looking for it among the
   sections. Below 1150px the label collapses to the icon alone so the row still does not wrap. */
.hdr-role-home {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    margin-right: .3rem;
    border-radius: 8px;
    color: rgba(255, 255, 255, .62);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}

    .hdr-role-home:hover,
    .hdr-role-home.active {
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }

    .hdr-role-home i {
        font-size: .95rem;
        letter-spacing: normal;
    }

@media (max-width: 1150px) {
    .hdr-role-home {
        font-size: 0;
        gap: 0;
    }
}

/* The dashboard link's badge. The same red pill as the bell's a band below, because
   both say the one thing -- something is waiting for you -- and two colours would
   make a reader look for a difference that is not there.

   It sets its own font-size on purpose: the home link drops to `font-size: 0` under
   1150px so that only its icon is left, and a badge inheriting that would disappear
   exactly on the widths where the row is tightest. */
.hdr-todo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1;
}

@media (max-width: 1150px) {
    /* The row above closes its gap along with the label; the badge still needs one. */
    .hdr-role-home .hdr-todo-badge {
        margin-left: .3rem;
    }
}

/* In the drawer the row is a full-width list item, so the badge belongs at its far
   end rather than trailing the label. */
.drw-role-link .hdr-todo-badge {
    margin-left: auto;
}

/* The dashboard shortcut beside the bell, phone only (hidden from 992px, where the role strip
   carries the same link). Drawn as the bell's twin — same circle, same corner badge with the
   white ring — because the two answer the same question side by side: is anything waiting. */
.hdr-quick-home {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #5f5e5a;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

    .hdr-quick-home i {
        font-size: 1.15rem;
    }

    .hdr-quick-home:hover,
    .hdr-quick-home.active {
        background: var(--theme-tint);
        color: var(--theme-strong);
    }

    /* Same cue as the bell's has-unread: the badge is not the only thing saying "work waits". */
    .hdr-quick-home:has(.hdr-todo-badge) {
        color: var(--theme-strong);
    }

    .hdr-quick-home .hdr-todo-badge {
        position: absolute;
        top: 0;
        right: 0;
        box-shadow: 0 0 0 2px #fff;
    }

.hdr-role-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .1rem;
    min-width: 0;
    margin-right: auto;
}

.hdr-role-group {
    position: relative;
}

.hdr-role-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .6rem;
    background: none;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, .78);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.6;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease, color .2s ease;
}

    .hdr-role-link:hover,
    .hdr-role-link.active {
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }

.hdr-role-caret {
    font-size: .6rem;
    opacity: .6;
}

/* `display: none` rather than the visibility/opacity fade used elsewhere: a hidden
   absolutely-positioned box still counts towards the document's scroll width, and the
   right-most of the seven admin menus would push a horizontal scrollbar onto every
   page. Losing the fade on an admin dropdown is the cheaper trade. */
.hdr-role-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 15rem;
    margin: 0;
    padding: .4rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 14px;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6);
}

.hdr-role-group:hover .hdr-role-menu,
.hdr-role-group:focus-within .hdr-role-menu {
    display: block;
}

    /* The right-most group sits close enough to the edge that a left-anchored 15rem menu
       hangs off the page on a narrow laptop. Flip it to open leftwards.

       :last-of-type, not :last-child — a group that permission filtering reduced to a single
       link renders as a plain <a> rather than a .hdr-role-group, and one of those standing
       last would leave the real last dropdown unflipped and hanging off the page.

       :nth-child(n+5) because "last" says nothing about where the group stands. A short bar —
       a cleaner sees the home link and one group — has its last group at the left edge, and
       flipping that one throws its menu off the left of the window instead (at ~1030px the
       bar is no longer centred with a margin to spare). Only a group in the right half of the
       eight-label budget is near the right edge; from the fourth one down a left-anchored menu
       ends well inside the window even at 992px. */
    .hdr-role-nav > .hdr-role-group:last-of-type:nth-child(n+5) .hdr-role-menu {
        left: auto;
        right: 0;
    }

.hdr-role-menu-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .65rem;
    border-radius: 9px;
    color: #4a4a46;
    font-size: .85rem;
    transition: background-color .2s ease, color .2s ease;
}

    .hdr-role-menu-link:hover,
    .hdr-role-menu-link.active {
        background: #f4f3f0;
        color: #2f2f2f;
    }

/* Sections inside a dropdown ---------------------------------------------------
   .hdr-role-menu is a <div>, not a <ul>: a caption cannot be a child of a list, so each
   section carries its own list and the captions sit between them. */

.hdr-role-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Small and quiet on purpose. A section is a scanning aid, not a level of navigation —
   it must not compete with the links it introduces, and it is not clickable. */
.hdr-role-menu-caption {
    margin: 0;
    padding: .3rem .65rem .2rem;
    color: #a5a49f;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

/* The rule sits *between* runs and never above the first one: a line under the menu's own
   top edge would read as a heading for the whole dropdown rather than as a division inside
   it. The second selector is what lets a run separate itself without a caption — the shape
   a single link takes when naming it would only repeat the link's own text. */
.hdr-role-menu-list + .hdr-role-menu-caption,
.hdr-role-menu-list + .hdr-role-menu-list {
    margin-top: .35rem;
    padding-top: .45rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
}

/* ── User menu ─────────────────────────────────────────────────────────────────
   The avatar at the right edge of the white bar and its dropdown. Sits beside the
   message bell and matches its circle exactly, so the two read as one pair of tools
   rather than two unrelated controls.

   Opened by :hover / :focus-within like the other header dropdowns — no JavaScript,
   and the desktop bar is the only place it takes this shape (the drawer renders the
   same NavGroup as a flat list through .drw-nav-link). */

.usr {
    position: relative;
    display: none;
}

.usr-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: #5f5e5a;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease, color .2s ease;
}

.usr:hover .usr-toggle,
.usr:focus-within .usr-toggle,
.usr-toggle:hover {
    background: var(--theme-tint);
    color: var(--theme-strong);
}

/* Right-anchored: the trigger is the last thing on the bar, so a left-anchored panel would
   hang off the page. */
.usr-panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 20;
    width: 15.5rem;
    max-width: calc(100vw - 2rem);
    padding: .4rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 14px;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

    /* Invisible bridge so the pointer can cross the gap without the panel closing. */
    .usr-panel::before {
        content: "";
        position: absolute;
        top: -.5rem;
        left: 0;
        right: 0;
        height: .5rem;
    }

.usr:hover .usr-panel,
.usr:focus-within .usr-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Names which account this is — the trigger is a generic icon, and somebody with an operator
   account and a private one needs to see which of the two they are about to act as. */
.usr-panel-head {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: 0;
    padding: .5rem .65rem .7rem;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.usr-panel-label {
    color: #a5a49f;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.usr-panel-name {
    color: #2f2f2f;
    font-size: .88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usr-list {
    display: flex;
    flex-direction: column;
    gap: .05rem;
    margin: .35rem 0 0;
    padding: 0;
}

.usr-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .5rem .65rem;
    background: none;
    border: 0;
    border-radius: 9px;
    color: #4a4a46;
    font-family: inherit;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease, color .2s ease;
}

    .usr-link i {
        width: 1.1rem;
        color: #a5a49f;
        text-align: center;
    }

    .usr-link:hover,
    .usr-link.active {
        background: #f4f3f0;
        color: #2f2f2f;
    }

/* Separated from the pages above it: leaving is not one more place to go. */
.usr-signout {
    margin: .35rem 0 0;
    padding-top: .35rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

    .usr-signout.is-inline {
        margin-top: .9rem;
        padding-top: .8rem;
    }

.usr-signout-button {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ── Mobile drawer ─────────────────────────────────────────────────────────────── */

.hdr-scrim {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(20, 20, 20, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s;
}

    .hdr-scrim.is-open {
        opacity: 1;
        visibility: visible;
    }

.drw {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 210;
    display: flex;
    flex-direction: column;
    width: min(88vw, 22rem);
    background: #fff;
    box-shadow: -20px 0 60px -30px rgba(0, 0, 0, .8);
    /* `visibility` (not just transform) keeps the closed drawer out of the tab order. */
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s;
}

    .drw.is-open {
        visibility: visible;
        transform: translateX(0);
    }

.drw-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1.15rem 1.15rem 1.25rem;
    background: linear-gradient(135deg, var(--theme-color), var(--theme-strong));
}

.drw-head-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    min-width: 0;
    margin-right: auto;
}

.drw-head-name {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.25;
}

.drw-close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    background: rgba(255, 255, 255, .18);
    border: 0;
    border-radius: 11px;
    color: #fff;
    font-size: .9rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease;
}

    .drw-close:hover {
        background: rgba(255, 255, 255, .3);
    }

.drw-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.15rem 1.15rem 2rem;
}

.drw-lang {
    margin-bottom: 1rem;
}

.drw-nav {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0;
    padding: 0;
}

.drw-nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem .7rem;
    border-radius: 12px;
    color: #4a4a46;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease;
}

    .drw-nav-link i {
        width: 1.2rem;
        color: #a5a49f;
        font-size: 1rem;
        text-align: center;
        transition: color .2s ease;
    }

    .drw-nav-link:hover {
        background: #f6f5f2;
        color: #2f2f2f;
    }

    .drw-nav-link.active {
        background: var(--theme-tint);
        color: var(--theme-strong);
    }

        .drw-nav-link.active i,
        .drw-nav-link:hover i {
            color: var(--theme-strong);
        }

.drw-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .85rem 1.25rem;
    background: var(--theme-color);
    border-radius: 999px;
    color: #fff;
    font-size: .98rem;
    font-weight: 600;
    transition: background-color .25s ease;
}

    .drw-cta:hover {
        background: var(--theme-strong);
        color: #fff;
    }

.drw-section,
.drw-role {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(0, 0, 0, .07);
}

.drw-section-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .8rem;
    color: #8a8a85;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.drw-contact {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: 0;
    padding: 0;
}

    .drw-contact a {
        display: flex;
        align-items: center;
        gap: .6rem;
        color: #4a4a46;
        font-size: .92rem;
        overflow-wrap: anywhere;
    }

        .drw-contact a i {
            color: var(--theme-strong);
        }

        .drw-contact a:hover {
            color: var(--theme-strong);
        }

/* Role sections in the drawer ------------------------------------------------ */

.drw-role-group + .drw-role-group {
    margin-top: .9rem;
}

.drw-role-group-title {
    margin: 0 0 .3rem .7rem;
    color: #a5a49f;
    font-size: .74rem;
    font-weight: 700;
}

/* Same division as the desktop dropdown, flattened: the drawer has room for the captions
   to breathe, so they get a little more space above than they do inside a menu. */
.drw-role-section-title {
    margin: 0 0 .25rem .7rem;
    color: #c0bfba;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.drw-role-list + .drw-role-section-title,
.drw-role-list + .drw-role-list {
    margin-top: .7rem;
}

.drw-role-list {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: 0;
    padding: 0;
}

.drw-role-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .7rem;
    background: none;
    border: 0;
    border-radius: 10px;
    color: #5f5e5a;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .2s ease, color .2s ease;
}

    .drw-role-link i {
        width: 1.1rem;
        color: #a5a49f;
        text-align: center;
    }

    .drw-role-link:hover,
    .drw-role-link.active {
        background: #f6f5f2;
        color: #2f2f2f;
    }

/* ── Focus visibility ─────────────────────────────────────────────────────────── */

.site-header a:focus-visible,
.site-header button:focus-visible,
.drw a:focus-visible,
.drw button:focus-visible {
    outline: 3px solid var(--theme-strong);
    outline-offset: 2px;
    border-radius: 10px;
}

/* On the brand band a brand-coloured ring would vanish — use white there. */
.hdr-utility a:focus-visible,
.hdr-utility button:focus-visible,
.drw-head button:focus-visible {
    outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {

    .site-header *,
    .hdr-scrim,
    .drw,
    .drw * {
        transition: none !important;
    }
}

/* ── Breakpoints ──────────────────────────────────────────────────────────────── */

/* Phones. A signed-in operator has three buttons at the right of the bar (dashboard, bell,
   burger), and the wordmark is the flex item that gives way to them. Measured worst case is
   "Ferienhaus Háj" (115px): at the default spacing it lost 13px at 360px. The buttons are
   transparent circles, so the space between them can shrink without them touching — the
   glyphs stay ~16px apart. A visitor who has only the burger sees no difference. */
@media only screen and (max-width: 420px) {

    .hdr-main-inner {
        gap: .6rem;
    }

    .hdr-main-actions {
        gap: .25rem;
    }
}

/* The 320px class of phones: the gutter and the brand spacing give back what they can, which
   keeps the Czech wordmark of the cottage whole; a longer name ends in an ellipsis, as it does
   for everybody else at this width. */
@media only screen and (max-width: 359.98px) {

    .hdr-main-inner {
        gap: .5rem;
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .hdr-brand {
        gap: .4rem;
    }

    .hdr-main-actions {
        gap: .15rem;
    }
}

/* Desktop: the drawer's contents fan out into the utility strip, the inline menu
   and the role bars; the drawer and its trigger disappear entirely. */
@media only screen and (min-width: 992px) {

    .hdr-utility,
    .hdr-nav,
    .hdr-role {
        display: block;
    }

    .hdr-nav,
    .hdr-cta {
        display: flex;
    }

    /* Below this width the avatar would be a second way into a menu the burger already opens. */
    .usr {
        display: block;
    }

    .hdr-burger,
    .hdr-quick-home,
    .hdr-scrim,
    .drw {
        display: none;
    }

    .hdr-main-inner {
        gap: 1rem;
        padding: .75rem 1.5rem;
    }

    .hdr-brand-name {
        font-size: 1.2rem;
    }

    .hdr-role-inner {
        min-height: 2.6rem;
        padding: .25rem 1.5rem;
    }
}

/* Below 1246px the container stops being capped and starts being the window, so this is the
   only band where the header actually gets narrower than its budget. The main bar has nothing
   left to give — its spacing is already at the minimum above — so here the gutters go, and the
   role bar below gives up padding rather than wrapping. */
@media only screen and (min-width: 992px) and (max-width: 1245px) {

    /* Same gutter as the white bar below, so the capacity pill stays flush with the logo. */
    .hdr-utility-inner,
    .hdr-main-inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hdr-main-inner {
        gap: .75rem;
    }

    .hdr-role-inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hdr-role-link {
        padding: .45rem .45rem;
        font-size: .8rem;
    }
}

/* The bottom of the desktop range, where the menu is at its widest relative to the window and the
   wordmark is the flex item that loses. Measured worst case is German signed in — "Ferienhaus Háj"
   plus a 562px menu, the bell, the avatar and "Jetzt buchen" — which at 992px overruns by ~100px
   and collapses the name to three characters. Everything here buys those pixels back from spacing
   and type size; nothing is hidden, because a menu item that disappears for a hundred pixels of
   window width is harder to trust than a slightly smaller one. */
@media only screen and (min-width: 992px) and (max-width: 1139px) {

    .hdr-main-inner {
        gap: .5rem;
    }

    .hdr-brand {
        gap: .5rem;
    }

    .hdr-nav-link {
        padding: .5rem .3rem;
        font-size: .82rem;
    }

        .hdr-nav-link::after {
            left: .3rem;
            right: .3rem;
        }

    .hdr-cta {
        padding: .5rem .8rem;
        font-size: .85rem;
    }

    /* The green strip above has the same problem with a different worst case: German, signed
       out ("bis zu 12 Gäste", the address, "Anmelden"/"Registrieren", "Unsere Unterkünfte" and
       three languages) wants 1059px and gets 945 at 992. Short of that the phone number and the
       address wrapped onto two lines each. Spacing gives most of it back; the rest comes from the
       language flags, which only repeat what the CZ/EN/DE codes beside them already say. */
    .hdr-utility-inner {
        gap: 1rem;
    }

    .hdr-utility-contact {
        gap: .9rem;
    }

        .hdr-utility-contact a {
            gap: .35rem;
            font-size: .78rem;
        }

    .hdr-utility-tools {
        gap: .3rem;
    }

    .hdr-auth {
        gap: .2rem;
        padding-right: .4rem;
        margin-right: .1rem;
    }

    .hdr-auth-link {
        padding: 0 .45rem;
    }

        .hdr-auth-link.is-strong {
            padding: 0 .7rem;
        }

    .acc-switch-toggle {
        padding: .3rem .6rem;
    }

    .hdr-utility .lang-opt {
        padding: .3rem .45rem;
    }

    .hdr-utility .lang-flag {
        display: none;
    }
}

/* wwwroot/styles/Components/capacityBadge.css */
/* Capacity pill — bed icon + "up to N guests" (Layout/Components/CapacityBadge.razor).

   Global rather than scoped because the same badge appears in the header, in the mobile
   drawer, in the object switcher and on the homepage object cards.

   Colours come from the brand tokens of the nearest [data-theme] ancestor, so the badge
   is green next to Chalupa and brown next to Roubenka without any per-page override.
   `.is-solid` is the variant for placement on a brand-coloured band, where the tinted
   default would disappear. */

.cap-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .6rem;
    background: var(--theme-tint);
    border-radius: 999px;
    color: var(--theme-strong);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.cap-badge-icon {
    flex: 0 0 auto;
    width: 1.05em;
    height: 1.05em;
}

/* On a filled brand band the tinted pill would be invisible — go translucent white. */
.cap-badge.is-solid {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* wwwroot/styles/Components/accommodationLogo.css */
/* Accommodation brand mark (Layout/Components/AccommodationLogo.razor).

   Global, like capacityBadge.css: the mark appears in the header, in the mobile drawer,
   in the object switcher and on the homepage object cards.

   ── The crop ──────────────────────────────────────────────────────────────────
   logo.png is a square lockup — line-art house on top, the house's name beneath it,
   generous margins all round. Shrunk whole into a 40px header mark the name becomes an
   unreadable smudge, so the tile is a window onto the house only; the name is rendered
   beside it as real text, which stays legible, selectable and translatable.

   Measured ink bounds of the two logo files (fractions of the 1254px square):

                     house X          house Y        name starts
       Cottage    18.0 – 83.6 %    24.9 – 60.4 %       64.1 %
       Roubenka   17.2 – 81.7 %    22.2 – 61.4 %       65.2 %

   The house needs 66.4 % of the width but only 39.2 % of the height, and the name starts
   at 64.1 % — so a SQUARE window wide enough for the house would always reach down into
   the name. Hence the landscape tile: --logo-ratio 1.65 is the flattest shape that fits
   the whole house with a little margin and still clears the name.

   Window used: 68 % of the file's width, centred on the house at (50.4 %, 41.8 %), which
   works out as X 16.4–84.4 % and Y 21.2–62.4 %. From that:
       zoom     = 1 / 0.68                     = 147 %   (of the TILE's width)
       shift-x  = -(0.504 x 1.47 - 0.5)        = -24.1 %
       shift-y  = -(0.418 x 1.47 - 0.5 / 1.65) = -31.2 %
   Percentage margins resolve against the containing block's WIDTH in CSS, which is why
   both offsets are expressed in tile widths. Retune here, never in markup, if a logo is
   redrawn — and re-measure the ink bounds first.

   The artwork sits on its own near-white ground, hence the white tile and the hairline
   border: without them the mark would bleed into a white bar and read as a stain on the
   brand-coloured drawer header. */

.acc-logo {
    --logo-ratio: 1.65;
    --logo-zoom: 147%;
    --logo-shift-x: -24.1%;
    --logo-shift-y: -31.2%;
    flex: 0 0 auto;
    display: block;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 12px;
    /* Placements set the height; the ratio derives the width. */
    height: 2.4rem;
    aspect-ratio: var(--logo-ratio);
}

.acc-logo-img {
    width: var(--logo-zoom);
    height: auto;
    display: block;
    margin-left: var(--logo-shift-x);
    margin-top: var(--logo-shift-y);
}

/* No logo file yet — the generic house, tinted with the object's brand. That is what a
   fourth accommodation renders until its artwork is delivered. */
.acc-logo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-tint);
    color: var(--theme-strong);
    font-size: 1.1em;
}

/* ── Placements ───────────────────────────────────────────────────────────────
   Only the box changes; the crop is inherited. */

/* Header wordmark — purely decorative, and not inside the home link either, so it has no
   hover or focus state: the mark reads the same at all times. */
.acc-logo.is-brand {
    height: 2.3rem;
}

/* Drawer header — sits on the brand gradient, so it needs no border of its own. */
.acc-logo.is-drawer {
    height: 2.8rem;
    border-color: transparent;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6);
}

/* One row of the object switcher: ringed in that object's brand tint, so the colour cue
   the coloured dot used to carry is not lost. */
.acc-logo.is-switch {
    height: 2.1rem;
    border-radius: 10px;
    box-shadow: 0 0 0 2px var(--theme-tint);
}

/* Homepage card — sits on the photo, so it gets a light ring to lift it off the image.
   Kept fully inside the frame: .other-media clips its overflow for the hover zoom, so a
   badge hanging over the edge would be cut in half. */
.acc-logo.is-card {
    position: absolute;
    left: .9rem;
    bottom: .9rem;
    height: 2.8rem;
    border-radius: 13px;
    border-color: rgba(255, 255, 255, .9);
    border-width: 2px;
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7);
}

@media only screen and (min-width: 992px) {

    .acc-logo.is-brand {
        height: 2.6rem;
    }
}

/* wwwroot/styles/Components/textBox.css */
/* ---------------------------------------------------------------------------
   Text box — the old result slab: one sentence on a brand fill (.green / .red
   from Layout/layout.css). Left on the reservation-sent and reservation-failed
   pages and on the check-in "not found" state.

   The light text is stated on the box, not on the paragraph: the call sites put a
   heading inside as often as a <p>, and both stand on the same dark fill.
   --------------------------------------------------------------------------- */

.textBox {
    width: var(--textBox-width);
    max-width: var(--textBox-max-width);
    margin: 0 auto;
    padding: 2.5rem 2.5rem;
    border-radius: var(--textBox-border-radius);
    color: #fff;
}

    .textBox p {
        font-size: var(--main-paragraph-size);
        font-weight: normal;
        text-align: center;
        text-justify: inter-word;
        line-height: 1.5rem;
    }

/* wwwroot/styles/Components/greyBox.css */
/* ---------------------------------------------------------------------------
   Grey box — the old public-page block: a wide grey slab with one centred
   headline or link inside. Only TitleBox is left; everything else moved to
   .page-btn / .section-head, and loading states use the shared <Spinner />.

   The box itself used to be styled in TitleBox.razor.css, i.e. behind a scoped
   attribute, so the two call sites outside that component got only the inner
   `.greyBox a` rule — no background, and back when `body, a, li` still painted
   everything white, no visible text either. The whole block lives here now.
   --------------------------------------------------------------------------- */

.greyBox {
    width: var(--greyBox-width);
    max-width: var(--greyBox-max-width);
    min-height: var(--greyBox-height);
    height: auto;
    margin: var(--element-spacing-mobile) auto var(--element-spacing-mobile) auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--grey);
    border-radius: var(--greyBox-border-radius);
    text-align: center;
    /* The box brings its own light text: the fill is dark, the page around it is
       not. */
    color: #fff;
}

    .greyBox h2, .greyBox h3, .greyBox a {
        width: 100%;
        margin: 0;
        padding: 1rem;
        line-height: 1.4;
        font-size: var(--greyBox-font-size);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--greyBox-height);
        box-sizing: border-box;
        text-align: center;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Links have to say it again: Bootstrap's own `a` colour would otherwise win
       over what the box passes down. */
    .greyBox a {
        color: #fff;
    }

/* Opt-in hover for the boxes that are really a button. The markup has carried
   this class from the start, but no rule ever defined it. */
@media only screen and (min-width: 992px) {

    .greyBoxHover {
        cursor: pointer;
        transition: background-color .3s ease;
    }

        .greyBoxHover:hover {
            background: var(--grey-box-hover-color);
        }
}

@media only screen and (min-width: 400px) and (max-width: 992px) {

    .greyBox {
        margin: var(--element-spacing-tablet) auto var(--element-spacing-tablet) auto;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

    .greyBox {
        margin: var(--element-spacing-notebook) auto var(--element-spacing-notebook) auto;
    }
}

@media only screen and (min-width: 1200px) {

    .greyBox {
        margin: var(--element-spacing-computer) auto var(--element-spacing-computer) auto;
    }
}

/* wwwroot/styles/Components/sectionHead.css */
/* Section heading for the public pages — the light replacement for the old grey
   `.greyBox` title bar. Global (not scoped) on purpose: the homepage renders some
   heads itself and lets child components (news list) render their own, and both
   have to look identical.

   Structure, all parts optional except the title:
     <header class="section-head">
       <span class="section-eyebrow"><i class="bi bi-…"></i>…</span>
       <h2 class="section-title">…</h2>
       <p class="section-sub">…</p>
     </header>

   Colours come from the [data-theme] brand tokens of the nearest themed ancestor
   (--theme-color / -strong / -tint), never from a hard-coded --green/--brown. */

.section-head {
    max-width: 42rem;
    margin: 0 auto var(--element-spacing-mobile) auto;
    padding: 0 1rem;
    text-align: center;
    box-sizing: border-box;
}

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .85rem;
    background: var(--theme-tint);
    border-radius: 999px;
    color: var(--theme-strong);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

    .section-eyebrow .bi {
        font-size: .8rem;
    }

.section-title {
    margin: .9rem 0 0;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.25;
    color: #2f2f2f;
    overflow-wrap: break-word;
}

    /* Short brand rule under the title — the only decoration the heading carries. */
    .section-title::after {
        content: "";
        display: block;
        width: 3rem;
        height: 3px;
        margin: .75rem auto 0;
        background: linear-gradient(90deg, var(--theme-color), var(--theme-strong));
        border-radius: 999px;
    }

.section-sub {
    margin: .9rem 0 0;
    font-size: 1.02rem;
    line-height: 1.6;
    color: #5f5e5a;
}

@media only screen and (min-width: 400px) and (max-width: 992px) {

    .section-head {
        margin-bottom: var(--element-spacing-tablet);
    }
}

@media only screen and (min-width: 992px) {

    .section-head {
        margin-bottom: var(--element-spacing-notebook);
    }

    .section-title {
        font-size: 2.15rem;
    }
}

@media only screen and (min-width: 1200px) {

    .section-title {
        font-size: 2.4rem;
    }
}

/* wwwroot/styles/Components/pageButton.css */
/* Pill call-to-action of the public pages — extracted from the homepage so every
   page that needs the same button renders the identical one instead of a private
   near-copy. Global (not scoped) for the same reason as sectionHead.css.

   Structure:
     <a class="page-btn is-primary">…</a>   solid brand fill
     <a class="page-btn is-ghost">…</a>     white with a brand outline

   Works on <a> and on <button> alike — the base rule resets the user-agent button
   chrome (border, background, font), otherwise a <button class="page-btn"> renders
   the pill inside a dark 2px `outset ButtonBorder` ring.

   Colours come from the [data-theme] brand tokens of the nearest themed ancestor
   (--theme-color / -strong / -tint), never from a hard-coded --green/--brown. */

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .85rem 1.6rem;
    border: 0;
    border-radius: 999px;
    background: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

    .page-btn.is-primary {
        background: var(--theme-color);
        color: #fff;
        box-shadow: 0 12px 24px -14px var(--theme-strong);
    }

        .page-btn.is-primary:hover:not(:disabled) {
            background: var(--theme-strong);
            color: #fff;
            transform: translateY(-2px);
        }

    .page-btn.is-ghost {
        background: #fff;
        border: 1.5px solid var(--theme-color);
        color: var(--theme-strong);
    }

        .page-btn.is-ghost:hover:not(:disabled) {
            background: var(--theme-tint);
            color: var(--theme-strong);
            transform: translateY(-2px);
        }

    /* Row-level actions (edit / remove in a list) — the full pill outweighs the row it sits in. */
    .page-btn.is-sm {
        gap: .4rem;
        padding: .45rem 1rem;
        font-size: .88rem;
    }

    .page-btn:focus-visible {
        outline: 3px solid var(--theme-strong);
        outline-offset: 3px;
    }

    /* Waiting for the server (sending a form, saving): visibly off, no hover lift, and the cursor
       says "working" — the spinner inside the button (.pf-spinner) tells the rest. */
    .page-btn:disabled {
        opacity: .65;
        cursor: progress;
    }

@media (prefers-reduced-motion: reduce) {

    .page-btn {
        transition: none;
    }

        .page-btn:hover {
            transform: none;
        }
}

/* wwwroot/styles/Components/tripChip.css */
/* Category chip of the trips page — the filter above the cards (Trips.razor) and the one beside
   the map (TripMap.razor). Global rather than scoped because it lives in two components and
   both must look the same; it started as a scoped copy of the gallery's .jump-chip.

   Structure:
     <button class="trip-chip [is-active]">
       <i class="bi bi-…"></i>Name<span class="trip-chip-count">3</span>
     </button>

   Buttons rather than links: a bare href="#…" would be resolved against <base href="/"> and
   navigate to the home page. Colours come from the [data-theme] brand tokens of the nearest
   themed ancestor (--theme-color / -strong / -tint). */

.trip-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 999px;
    color: #2f2f2f;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

    .trip-chip:hover {
        border-color: var(--theme-color);
        color: var(--theme-strong);
        transform: translateY(-2px);
        box-shadow: 0 14px 26px -20px rgba(0, 0, 0, .6);
    }

    .trip-chip:focus-visible {
        outline: 3px solid var(--theme-strong);
        outline-offset: 3px;
    }

    .trip-chip .bi {
        color: var(--theme-color);
    }

    .trip-chip.is-active {
        background: var(--theme-color);
        border-color: var(--theme-color);
        color: #fff;
    }

        .trip-chip.is-active .bi {
            color: #fff;
        }

.trip-chip-count {
    padding: .05rem .45rem;
    background: var(--theme-tint);
    border-radius: 999px;
    color: var(--theme-strong);
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.trip-chip.is-active .trip-chip-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* A row of chips that scrolls sideways — both filters on a phone and a tablet. Wrapped, a dozen
   categories took ten rows and pushed the cards (and the map) off the first screen. The row fades
   out on its right edge, so a chip cut in half reads as "there is more this way"; the component
   runs the row out to the edges of its box (a negative margin and the matching padding) and pads
   its end by the fade's width, so the last chip can scroll clear of it. From 992px the chips wrap
   again. */
.trip-chip-scroller {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}

    .trip-chip-scroller::-webkit-scrollbar {
        display: none;
    }

    .trip-chip-scroller .trip-chip {
        flex-shrink: 0;
        white-space: nowrap;
    }

@media only screen and (min-width: 992px) {

    .trip-chip-scroller {
        flex-wrap: wrap;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .trip-chip {
        transition: none;
    }

        .trip-chip:hover {
            transform: none;
        }
}

/* wwwroot/styles/Components/statusPill.css */
/* Status pills — one shared object for every administration surface that shows a
   reservation / check-in state (ReservationSummary header, ReservationList grid).
   The modifiers are exactly what IReservationStatusStyleHelper and ICheckInStyleHelper
   return (is-ok / is-warn / is-error / is-neutral / is-info and the status-* aliases),
   so a colour change here recolours every screen at once.
   The semantic colours are deliberately independent of the brand theme tokens. */

.res-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .78rem;
    border: 1px solid transparent;
    white-space: nowrap;
}

.res-pill .bi {
    font-size: .8rem;
}

.res-pill.is-ok,
.res-pill.status-success {
    background: #eef6ec;
    color: #3d6b33;
    border-color: #cfe3c9;
}

.res-pill.is-info,
.res-pill.status-info {
    background: #eef3fd;
    color: #1d4ed8;
    border-color: #d3e0f8;
}

.res-pill.is-warn,
.res-pill.status-warning {
    background: #fdf3e3;
    color: #8a5a17;
    border-color: #ecd9b4;
}

.res-pill.is-error {
    background: #fceaea;
    color: #a32d2d;
    border-color: #eecccc;
}

.res-pill.is-neutral,
.res-pill.status-secondary {
    background: #f1efe8;
    color: #5f5e5a;
    border-color: #ddd9cd;
}

/* Compact variant for dense surfaces (grid cells). */
.res-pill.is-sm {
    gap: 5px;
    padding: 3px 9px;
    font-size: .74rem;
}

/* wwwroot/styles/Components/resultCard.css */
/* Jednoduchá karta s výsledkem odeslaného formuláře (úspěch / chyba).
   Vizuální jazyk sdílí s veřejnou stránkou stavu rezervace
   (Pages/Bookings/ReservationStatusScreen.razor.css).

   Třídy jsou prefixované `result-`, protože tenhle soubor je globální a
   nechceme kolidovat s bootstrapem (.badge, .btn, .card). Brand barvy se berou
   z theme tokenů aktivovaných atributem data-theme na .result-page. */
.result-page {
    --result-ink: #2b2b28;
    --result-ink-soft: #5f6460;
    --result-hairline: #e6e6df;

    /* Barvy varianty — přebije je .result-card.is-error níž. */
    --result-accent: var(--theme-color);
    --result-accent-strong: var(--theme-strong);
    --result-accent-tint: var(--theme-tint);

    /* Odsazení od headeru řeší globálně .content (layout.css), tady jen
       horizontální a spodní padding. */
    padding: 0 1rem 4rem;
}

.result-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 3rem 2.4rem 2.6rem;
    text-align: center;
    background: linear-gradient(180deg, var(--result-accent-tint) 0%, #fff 55%);
    border: 1px solid var(--result-hairline);
    border-radius: 28px;
    box-shadow: 0 18px 50px -24px rgba(20, 60, 20, .45);
    font-family: var(--font);
    color: var(--result-ink);
}

.result-card.is-error {
    --result-accent: var(--red);
    --result-accent-strong: #b52a3a;
    --result-accent-tint: #fbecec;

    /* .page-btn bere barvu z theme tokenů — v chybové kartě je přebarví na červenou. */
    --theme-color: var(--result-accent);
    --theme-strong: var(--result-accent-strong);
    --theme-tint: var(--result-accent-tint);

    box-shadow: 0 18px 50px -24px rgba(120, 30, 30, .45);
}

.result-badge {
    width: 84px;
    height: 84px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--result-accent);
    box-shadow: 0 0 0 8px var(--result-accent-tint);
}

.result-badge svg {
    width: 44px;
    height: 44px;
}

.result-badge .draw {
    stroke: #fff;
    stroke-width: 5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 80;
    stroke-dashoffset: 80;
    animation: result-draw .6s .15s ease forwards;
}

@keyframes result-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .result-badge .draw {
        animation: none;
        stroke-dashoffset: 0;
    }
}

.result-title {
    margin: 0 0 .8rem;
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    /* 700, ne 800: web nenačítá webfont, `--font` padne na Arial a ten při 800
       skočí na Arial Black — nadpis pak vypadá jako jiné písmo než zbytek webu. */
    font-weight: 700;
    color: var(--result-ink);
    text-wrap: balance;
    line-height: 1.2;
}

.result-lead {
    margin: 0 auto 2.2rem;
    max-width: 42ch;
    color: var(--result-ink-soft);
    font-size: 1.02rem;
    line-height: 1.6;
}

/* CTA je sdílené `.page-btn.is-primary` (styles/Components/pageButton.css), ať
   vypadá stejně jako na přihlášení, registraci i v hlavičce — tady jen šířka. */
.result-card .page-btn {
    min-width: 220px;
}

.result-foot {
    margin: 1.6rem 0 0;
    font-size: .88rem;
    color: var(--result-ink-soft);
}

.result-foot a {
    color: var(--result-accent-strong);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 560px) {
    .result-card {
        padding: 2.4rem 1.4rem 2rem;
    }

    .result-card .page-btn {
        min-width: 0;
        width: 100%;
    }
}

/* wwwroot/styles/Components/messaging.css */
/* ---------------------------------------------------------------------------
   Messaging — guest-facing thread, header bell and the operator's inbox.

   The guest thread is styled like the rest of the public cards rather than like
   a chat app: it is a record of correspondence they can also read in their
   mailbox, not a live chat they are expected to sit in.
   --------------------------------------------------------------------------- */

.gthread {
    margin-top: 28px;
}

.gthread-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gmsg {
    max-width: 88%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e2e2dd;
    background: #fff;
    color: #2c2c2a;
}

.gmsg.is-mine {
    align-self: flex-end;
    background: var(--theme-tint, #eef6ec);
    border-color: color-mix(in srgb, var(--theme-color, #228b22) 25%, transparent);
}

.gmsg.is-theirs {
    align-self: flex-start;
}

/* Our message the guest had not seen before opening the page — what their bell
   was counting. The badge's red ties it to the bell; the border alone would be
   lost on a phone. Stays for the visit, though the bell goes out at once. */
.gmsg.is-new {
    border-color: color-mix(in srgb, #c0392b 45%, #e2e2dd);
    box-shadow: 0 0 0 3px color-mix(in srgb, #c0392b 10%, transparent);
}

.gmsg-new {
    padding: 1px 7px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.gmsg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
}

.gmsg-author {
    font-weight: 600;
    color: var(--theme-strong, #206815);
}

.gmsg-body {
    font-size: 0.94rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Bodies are stored without their e-mail layout, but a builder is still free to
   emit a table or a picture. Contained so the thread never scrolls the page
   sideways on a phone. */
.gmsg-body table {
    max-width: 100%;
}

.gmsg-body img {
    max-width: 100%;
    height: auto;
}

/* The reply chain the guest's mail client quoted under their message: kept, but
   folded, because it is this same conversation one exchange older. */
.gmsg-quoted,
.msg-quoted {
    margin-top: 10px;
    border-top: 1px dashed #e2e2dd;
    padding-top: 8px;
}

/* The browser's own disclosure triangle is kept: it is the one control on the
   page every reader already knows how to read. */
.gmsg-quoted > summary,
.msg-quoted > summary {
    cursor: pointer;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
}

/* Plain text, so the quoted e-mail keeps the line breaks it was written with and
   nothing else it brought along. */
.gmsg-quoted-body,
.msg-quoted-body {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid #e2e2dd;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
    overflow-wrap: anywhere;
}

/* The pictures sent with a message, under its text on both sides of the
   conversation. A row of thumbnails rather than the images at full size: a bubble
   is a line of talk, and three phone photos rendered whole would make one message
   the height of the page. The link opens the original. */
.msg-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.msg-images li {
    margin: 0;
}

.msg-images a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e2dd;
    background: #f4f4f1;
    line-height: 0;
}

.msg-images img {
    display: block;
    width: 160px;
    height: 120px;
    object-fit: cover;
}

@media (max-width: 480px) {
    .msg-images img {
        width: 120px;
        height: 90px;
    }
}

/* Automatic mail: full width and quiet, so it reads as a line in a log rather
   than as somebody talking. */
.gmsg-auto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px dashed #dcdcd5;
    background: #fbfbf9;
    color: var(--text-muted, #6b7280);
    font-size: 0.86rem;
    line-height: 1.45;
}

.gmsg-auto-ico {
    flex: none;
    margin-top: 1px;
    font-size: 1rem;
    color: var(--theme-strong, #206815);
}

.gmsg-auto-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.gmsg-auto-txt strong {
    font-weight: 600;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

.gthread-empty {
    margin: 16px 0 0;
    color: var(--text-muted, #6b7280);
    font-size: 0.92rem;
}

.gthread-sent {
    margin: 14px 0 0;
    color: var(--theme-strong, #206815);
    font-weight: 600;
    font-size: 0.9rem;
}

.gthread-error {
    margin: 14px 0 0;
    color: #a12626;
    font-size: 0.9rem;
}

.gthread-composer {
    margin-top: 18px;
}

.gthread-composer label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.92rem;
}

.gthread-composer textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d8d8d2;
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

.gthread-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

/* --- Header bell ---------------------------------------------------------- */

.msg-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #5f5e5a;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.msg-bell:hover {
    background: var(--theme-tint);
    color: var(--theme-strong);
}

/* Waiting messages are the point of the bell — tint it so the badge is not the
   only thing carrying that state. */
.msg-bell.has-unread {
    color: var(--theme-strong);
}

.msg-bell i {
    font-size: 1.1rem;
}

.msg-bell-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #c0392b;
    /* Ring in the bar colour: keeps the badge off the bell glyph and off the
       green CTA button standing right next to it. */
    box-shadow: 0 0 0 2px #fff;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}


/* --- Operator inbox -------------------------------------------------------
   Two panes in one white card, the way a mail client is laid out: the
   conversations on the left, the one being read on the right. Deliberately
   quiet — neutral greys, one brand accent per house through the [data-theme]
   tokens (avatar, dot, selection), and colour otherwise only where something is
   waiting on us: the red count, the "needs reply" flag, the unread badge.

   The card has a fixed height so the list and the conversation each scroll on
   their own, and the reply box stays in reach under a long conversation. Below
   the tablet breakpoint only one pane shows at a time (see the end of the file).
   -------------------------------------------------------------------------- */

.mbx-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px 32px;
    color: #2c2c2a;
}

/* The shared section head (sectionHead.css); the page's own gap spaces it from the card. */
.mbx-page .mbx-head {
    margin-bottom: 0;
}

.mbx-shell {
    display: grid;
    grid-template-columns: minmax(290px, 370px) minmax(0, 1fr);
    height: clamp(540px, calc(100dvh - 250px), 940px);
    background: #fff;
    border: 1px solid #e6e6e1;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 18px 40px -30px rgba(0, 0, 0, .25);
}

/* --- The list ------------------------------------------------------------- */

.mbx-side {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fafaf8;
    border-right: 1px solid #ecece7;
}

/* The list's head: what it is on the left, a new conversation on the right. */
.mbx-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 0 18px;
}

.mbx-side-title {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8b8a85;
}

.mbx-compose {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, #206815);
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.mbx-compose:hover {
    background: var(--theme-color, #228b22);
    color: #fff;
}

.mbx-compose:focus-visible {
    outline: 2px solid var(--theme-strong, #206815);
    outline-offset: 2px;
}

.mbx-search {
    position: relative;
    margin: 10px 14px;
}

.mbx-search > .bi {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: #8b8a85;
    font-size: .88rem;
    pointer-events: none;
}

.mbx-search input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid #e0e0da;
    border-radius: 10px;
    background: #fff;
    color: #2c2c2a;
    font: inherit;
    font-size: .92rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mbx-search input::placeholder,
.mbx-field input::placeholder {
    color: #a3a29b;
}

.mbx-search input:focus,
.mbx-field input:focus {
    outline: none;
    border-color: var(--theme-strong, #206815);
    box-shadow: 0 0 0 3px var(--theme-tint, #eef6ec);
}

/* One row that scrolls sideways — wrapping made the tabs a block of two or three lines above the
   list. The fade at the right edge says there is more; the padding lets the last tab come out of
   the fade when scrolled to the end. The scrollbar shows only under a mouse that hovers. */
.mbx-tabs {
    display: flex;
    gap: 4px;
    padding: 0 28px 10px 10px;
    border-bottom: 1px solid #ecece7;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.mbx-tabs:hover {
    scrollbar-color: #d6d5cf transparent;
}

.mbx-tab {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #5f5e5a;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.mbx-tab:hover {
    background: #efefea;
    color: #2c2c2a;
}

.mbx-tab.is-active {
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, #206815);
}

.mbx-tab:focus-visible {
    outline: 2px solid var(--theme-strong, #206815);
    outline-offset: 1px;
}

.mbx-tab-count {
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e7e6e0;
    color: #5f5e5a;
    font-size: .7rem;
    line-height: 18px;
    text-align: center;
}

.mbx-tab.is-active .mbx-tab-count {
    background: #fff;
    color: var(--theme-strong, #206815);
}

/* Work waiting on us — red whichever tab is open. */
.mbx-tab-count.is-alert,
.mbx-tab.is-active .mbx-tab-count.is-alert {
    background: #c0392b;
    color: #fff;
}

.mbx-list-wrap {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.mbx-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mbx-row {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    color: #2c2c2a;
    text-decoration: none;
    transition: background-color .15s ease;
}

.mbx-row:hover {
    background: #f0f0ec;
    color: #2c2c2a;
}

.mbx-row:focus-visible {
    outline: 2px solid var(--theme-strong, #206815);
    outline-offset: -2px;
}

.mbx-row.is-selected {
    background: var(--theme-tint, #eef6ec);
}

/* The open conversation's edge, in its house's colour. */
.mbx-row.is-selected::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--theme-color, #228b22);
}

.mbx-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, #206815);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    user-select: none;
}

.mbx-row.is-selected .mbx-avatar {
    background: #fff;
}

.mbx-avatar.is-lg {
    width: 46px;
    height: 46px;
    font-size: .92rem;
}

.mbx-avatar.is-icon {
    font-size: 1.1rem;
}

.mbx-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mbx-row-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mbx-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: .93rem;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mbx-when {
    flex: none;
    font-size: .74rem;
    color: #8b8a85;
    white-space: nowrap;
}

/* Two lines of the newest message — enough to decide whether to open it. */
.mbx-preview {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .84rem;
    line-height: 1.4;
    color: #6b6a65;
    overflow-wrap: anywhere;
}

.mbx-preview-you {
    margin-right: 4px;
    color: #9a9993;
}

/* Unread reads heavier, as in every mail client — the badge alone is too small a signal. */
.mbx-row.is-unread .mbx-name {
    font-weight: 700;
}

.mbx-row.is-unread .mbx-preview {
    color: #2c2c2a;
}

.mbx-row.is-unread .mbx-when {
    color: var(--theme-strong, #206815);
    font-weight: 700;
}

.mbx-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 4px;
    font-size: .73rem;
    color: #8b8a85;
}

.mbx-house,
.mbx-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.mbx-meta-item .bi {
    font-size: .72rem;
}

/* Which house — the same brand dot the reservation grid uses, so it means the same on both. */
.mbx-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-color, #a3a29b);
}

.mbx-flag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fdecea;
    color: #a3261c;
    font-weight: 600;
    white-space: nowrap;
}

.mbx-badge {
    flex: none;
    min-width: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.mbx-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 48px 20px;
    color: #8b8a85;
    font-size: .9rem;
    text-align: center;
}

.mbx-list-empty .bi {
    font-size: 1.6rem;
    color: #c5c4be;
}

.mbx-list-empty p {
    margin: 0;
}

.mbx-list-empty.is-inline {
    padding: 24px 12px;
}

/* The next screenful of a long view — quiet, full width, under the last row. */
.mbx-more {
    padding: 4px 6px 12px;
}

.mbx-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 36px;
    border: 1px dashed #d6d5cf;
    border-radius: 10px;
    background: transparent;
    color: #5f5e5a;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mbx-more-btn:hover:not(:disabled) {
    border-color: var(--theme-color, #228b22);
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, #206815);
}

.mbx-more-btn:focus-visible {
    outline: 2px solid var(--theme-strong, #206815);
    outline-offset: 1px;
}

.mbx-more-btn:disabled {
    opacity: .6;
    cursor: default;
}

/* --- The pane ------------------------------------------------------------- */

.mbx-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mbx-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 380px;
    margin: auto;
    padding: 32px 24px;
    color: #6b6a65;
    text-align: center;
}

.mbx-placeholder-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, #206815);
    font-size: 1.6rem;
}

.mbx-placeholder h2 {
    margin: 6px 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2f2f2f;
}

.mbx-placeholder p {
    margin: 0 0 8px;
    font-size: .92rem;
    line-height: 1.55;
}

.mbx-placeholder .page-btn {
    padding: .6rem 1.2rem;
    font-size: .9rem;
}

.mbx-conv {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mbx-conv.is-placeholder {
    justify-content: center;
}

.mbx-conv-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #ecece7;
}

/* Only on a phone, where the pane has replaced the list. */
.mbx-back {
    display: none;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    margin-left: -6px;
    border-radius: 50%;
    color: #3d3d3a;
    font-size: 1.1rem;
    text-decoration: none;
}

.mbx-back:hover {
    background: #f0f0ec;
    color: #2c2c2a;
}

.mbx-conv-who {
    flex: 1;
    min-width: 0;
}

.mbx-conv-name {
    margin: 0;
    overflow: hidden;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    color: #2f2f2f;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mbx-conv-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin: 2px 0 0;
    font-size: .82rem;
    color: #6b6a65;
}

.mbx-conv-contact a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.mbx-conv-contact a:hover {
    color: var(--theme-strong, #206815);
    text-decoration: underline;
}

.mbx-conv-actions {
    flex: none;
    display: flex;
    gap: 6px;
}

.mbx-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #e0e0da;
    border-radius: 10px;
    background: #fff;
    color: #3d3d3a;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mbx-action:hover:not(:disabled) {
    border-color: var(--theme-color, #228b22);
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, #206815);
}

.mbx-action:disabled {
    opacity: .6;
    cursor: default;
}

/* The stay in one line — house, dates, nights, people, booking state. */
.mbx-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-bottom: 1px solid #ecece7;
    background: #fafaf8;
}

.mbx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid #e6e6e1;
    border-radius: 999px;
    background: #fff;
    color: #3d3d3a;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.mbx-chip .bi {
    font-size: .8rem;
    color: #8b8a85;
}

.mbx-chip.is-subject {
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
}

/* column-reverse keeps the scroll anchored on the newest message — see the pane's markup. */
.mbx-conv-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
    overflow-y: auto;
    padding: 20px;
}

.mbx-conv-scroll .msg-timeline {
    margin: 0;
}

.mbx-conv-foot {
    padding: 12px 20px 16px;
    border-top: 1px solid #ecece7;
    background: #fff;
}

/* The composer is shared with the reservation's Messages tab, where it sits under the timeline
   with a rule above it. Here the footer is that rule already. */
.mbx-conv-foot .msg-composer {
    margin: 0;
    padding: 0;
    border: 0;
}

.mbx-conv-foot .msg-composer label:not(.msg-attach-btn) {
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8b8a85;
}

/* Three lines to start with, not the composer's four: under a conversation every line of the
   box is a line less of the conversation. It still grows by hand for a long answer. */
.mbx-conv-foot .msg-composer textarea {
    height: 76px;
    min-height: 52px;
    border-color: #e0e0da;
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mbx-conv-foot .msg-composer-actions {
    margin-top: 6px;
}

.mbx-conv-foot .msg-composer textarea:focus {
    outline: none;
    border-color: var(--theme-strong, #206815);
    box-shadow: 0 0 0 3px var(--theme-tint, #eef6ec);
}

.mbx-conv-foot .msg-composer .page-btn {
    padding: .6rem 1.3rem;
    font-size: .9rem;
}

.mbx-conv-foot > .msg-error {
    margin: 0 0 8px;
}

.mbx-closed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f4f4f0;
    color: #5f5e5a;
    font-size: .88rem;
}

.mbx-closed.is-warn {
    background: #fdf3e3;
    color: #8a5a17;
}

/* --- New message ---------------------------------------------------------- */

.mbx-compose-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    overflow-y: auto;
}

.mbx-field-label {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8b8a85;
}

.mbx-search.is-lg {
    margin: 0;
}

.mbx-search.is-lg input {
    height: 46px;
    border-radius: 12px;
    font-size: 1rem;
}

.mbx-hint {
    margin: 0;
    font-size: .84rem;
    line-height: 1.5;
    color: #8b8a85;
}

.mbx-people {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mbx-person {
    overflow: hidden;
    border: 1px solid #e6e6e1;
    border-radius: 14px;
    background: #fff;
}

.mbx-person-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.mbx-person-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mbx-person-who strong {
    font-size: .95rem;
}

.mbx-person-who small {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    font-size: .8rem;
    color: #6b6a65;
}

.mbx-person-who small span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    overflow-wrap: anywhere;
}

.mbx-options {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #efefea;
}

.mbx-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-top: 1px solid #f3f3ef;
    background: #fff;
    color: #2c2c2a;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.mbx-option:first-child {
    border-top: 0;
}

.mbx-option:hover:not(:disabled) {
    background: var(--theme-tint, #f4f7f2);
}

.mbx-option:focus-visible {
    outline: 2px solid var(--theme-strong, #206815);
    outline-offset: -2px;
}

.mbx-option:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.mbx-option-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mbx-option-main strong {
    font-size: .88rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.mbx-option-main small {
    font-size: .76rem;
    color: #8b8a85;
}

.mbx-option-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f1f1ed;
    color: #6b6a65;
}

.mbx-option-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef3fd;
    color: #1d4ed8;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.mbx-option-tag.is-warn {
    background: #fdf3e3;
    color: #8a5a17;
}

.mbx-option-go {
    flex: none;
    color: #b5b4ae;
    font-size: .8rem;
}

.mbx-option.is-general {
    background: #fcfcfa;
}

/* The typed address, offered on its own above the people found. */
.mbx-option.is-address {
    border: 1px dashed #d6d5ce;
    border-radius: 14px;
    padding: 12px 14px;
}

.mbx-to-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e6e6e1;
    border-radius: 14px;
    background: #fafaf8;
}

.mbx-to-label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8b8a85;
}

.mbx-to-who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mbx-to-who small {
    font-size: .8rem;
    color: #6b6a65;
    overflow-wrap: anywhere;
}

.mbx-link-btn {
    flex: none;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--theme-strong, #206815);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}

.mbx-link-btn:hover:not(:disabled) {
    background: var(--theme-tint, #eef6ec);
}

.mbx-to-about {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--theme-tint, #eef6ec);
    color: #3d3d3a;
    font-size: .88rem;
}

.mbx-fields {
    display: grid;
    gap: 14px;
}

.mbx-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.mbx-field input {
    height: 42px;
    padding: 0 12px;
    border: 1px solid #d8d8d2;
    border-radius: 10px;
    background: #fff;
    color: #2c2c2a;
    font: inherit;
    font-size: .95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mbx-segment {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mbx-segment-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #e0e0da;
    border-radius: 999px;
    background: #fff;
    color: #3d3d3a;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mbx-segment-btn:hover {
    border-color: var(--theme-color, #228b22);
}

.mbx-segment-btn.is-active {
    border-color: var(--theme-color, #228b22);
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, #206815);
}

/* --- Narrower screens ----------------------------------------------------- */

/* A laptop: the pane's buttons keep their icons and lose their words (the title says them). */
@media (max-width: 1180px) {
    .mbx-action span {
        display: none;
    }

    .mbx-action {
        width: 36px;
        padding: 0;
        justify-content: center;
    }
}

/* A tablet or a phone: one pane at a time. The list is the page until a conversation is
   opened; then the conversation is, with the arrow back in its header. */
@media (max-width: 899.98px) {
    .mbx-page {
        padding: 0 12px 24px;
    }

    .mbx-shell {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .mbx-side {
        border-right: 0;
    }

    .mbx-list-wrap {
        overflow: visible;
    }

    .mbx-page.has-detail .mbx-head,
    .mbx-page.has-detail .mbx-side,
    .mbx-page:not(.has-detail) .mbx-main {
        display: none;
    }

    .mbx-main {
        height: calc(100dvh - 150px);
        min-height: 460px;
    }

    .mbx-back {
        display: grid;
    }

    .mbx-conv-head,
    .mbx-context,
    .mbx-conv-scroll,
    .mbx-conv-foot,
    .mbx-compose-body {
        padding-right: 14px;
        padding-left: 14px;
    }

    .mbx-conv-head .mbx-avatar {
        display: none;
    }
}

@media (max-width: 640px) {
    .gmsg {
        max-width: 100%;
    }

    /* The hint beside the picture button is the one line a phone can spare — without it the
       two buttons share a row and the conversation keeps the height. */
    .mbx-conv-foot .msg-composer .input-hint {
        display: none;
    }
}

/* wwwroot/styles/Pages/Components/forms.css */
.form {
    width: 80%;
    max-width: 30rem;
    margin: 0 auto;
    padding: 2.5rem 1rem 2.5rem 1rem;
    border-radius: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.input-container {
    background: white;
    margin: 0 auto;
    width: 90%;
    padding: 1rem;
    border-radius: 20px;
}

.remember-me-container {
    background: white;
    border-radius: 15px;
    padding: 1rem 1.25rem;
    width: 90%;
    margin: 0 auto;
    color: #333 !important;
}

.form label {
    display: block;
    text-align: left;
    color: #333;
    font-size: 14px;
}

.form .input-hint {
    display: block;
    text-align: left;
    color: #666;
    font-size: 0.8rem;
    margin-top: 0.4rem;
}

.form ul {
    margin: 2rem auto;
    width: 90%;
    list-style: none;
    border-radius: 30px;
    color: white;
    background: var(--grey);
}

.form input, .form textarea {
    margin-top: 6px;
    padding: 10px 0 10px 10px;
    color: rgb(94, 94, 94);
    width: 100%;
    border: 1px solid white;
    border-radius: 10px;
    background: none;
    outline: none;
    font-size: .9rem;
}

    .form input:focus,
    .form input:focus-visible,
    .form textarea:focus,
    .form textarea:focus-visible {
        outline: none;
        border: 1px solid var(--theme-strong) !important;
        border-radius: 10px;
        transition: all 0.3s ease;
        box-shadow: none !important;
    }

.form .validation-message,
.form .field-validation-error {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--red);
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-top: 0.75rem;
    text-align: left;
    display: block;
    width: 100%;
}

.form .form-select {
    margin-top: 6px;
    color: rgb(94, 94, 94);
    width: 100%;
    border: 1px solid white;
    border-radius: 10px;
    background-color: transparent;
    font-size: .9rem;
    box-shadow: none;
}

    .form .form-select:focus,
    .form .form-select:focus-visible {
        outline: none;
        border: 1px solid var(--theme-strong) !important;
        box-shadow: none !important;
    }

    .form .form-select.is-invalid {
        border-color: white !important;
        background-image: none !important;
        box-shadow: none !important;
    }

.form .validation-errors {
    margin: 0 auto;
    padding: 1rem;
    background: white;
    color: var(--red);
    border-radius: 20px;
    font-size: 0.95rem;
    text-align: left;
    list-style: none;
}

.validation-errors li {
    padding: 0.25rem 0;
    color: var(--red);
    list-style: none;
}

/* The check-in guest form (page canvas, guest cards, add-guest button, submit)
   moved to styles/Pages/Components/checkIn.css — the "minimal canvas" design shared
   with the reservation edit screen. */

/* wwwroot/styles/General/flatpickr.css */
/* Small badge shown in calendar cells (e.g., price) */
.flatpickr-day.has-label {
    position: relative;
    padding-bottom: 1.2em; /* room for label */
}

.flatpickr-day .fp-day-label {
    position: absolute;
    bottom: 0.15em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65em;
    line-height: 1;
    opacity: 0.85;
    pointer-events: none;
}

/* wwwroot/styles/Components/calendarOccupancy.css */
/* Occupancy in the date pickers of the reservation forms: ReservationForm (.pf-page - the
   guest's request and the admin "new reservation") and the reservation editor (.res-page).
   A day is painted like on the public availability calendar (OccupancyCalendar, the same
   --occupancy-* tokens from variables.css): free, a half day on a diagonal where another stay
   starts or ends, booked. The half day used to be struck through like a booked one, and guests
   read it as "no stay possible" although they could arrive or leave on it.

   The colour says whether the house is occupied. Whether THIS field accepts the day is said
   by the number alone - muted when it does not. Havit's own disabled look (half opacity and a
   strike-through) would wash the colours out and bring the strike back, so it is switched off.

   Listed before reservationEdit.css and publicForm.css in SiteStylesheets.targets: their range
   rules weigh the same as the day rules below and have to win - the picked stay is drawn over
   the occupancy. Havit's scoped stylesheet is linked after the bundle (see App.razor), so every
   day rule carries one class more than the .hx-calendar-day-* rule it overrides. */

:is(.pf-page, .res-page) .hx-calendar {
    --hx-calendar-day-disabled-opacity: 1;
    --hx-calendar-day-disabled-text-decoration: none;
    --hx-calendar-day-border-radius: 8px;
}

/* Separate tiles, as on the availability calendar. Havit packs the days edge to edge, and
   two neighbouring half days then melt into one diagonal stripe across the week. The day
   names take the same column gap to stay above their days. */
:is(.pf-page, .res-page) .hx-calendar :is(.hx-calendar-week, .hx-calendar-day-names) {
    column-gap: 4px;
}

:is(.pf-page, .res-page) .hx-calendar .hx-calendar-week + .hx-calendar-week {
    margin-top: 4px;
}

/* --- Occupancy - the colour key of the public form (.pf-swatch) shares the rules --- */

:is(.pf-page, .res-page) .hx-calendar .hx-calendar-day.day-free,
.pf-swatch.day-free {
    background: var(--occupancy-free-bg);
    color: var(--occupancy-free-fg);
}

/* Half day: free until the afternoon on the day another stay arrives, from the morning on
   the day one leaves. Same diagonal as on the availability calendar, only the booked half
   changes sides. */
:is(.pf-page, .res-page) .hx-calendar .hx-calendar-day.day-arrival,
.pf-swatch.day-arrival {
    background: linear-gradient(135deg, var(--occupancy-free-bg) 0 50%, var(--occupancy-taken-bg) 50% 100%);
    color: var(--occupancy-free-fg);
}

:is(.pf-page, .res-page) .hx-calendar .hx-calendar-day.day-departure {
    background: linear-gradient(135deg, var(--occupancy-taken-bg) 0 50%, var(--occupancy-free-bg) 50% 100%);
    color: var(--occupancy-free-fg);
}

/* A day the field does not accept - a stay shorter than the minimum, outside the departure
   window, the day another stay arrives on in the arrival calendar - keeps its colour and
   only mutes its number. */
:is(.pf-page, .res-page) .hx-calendar .hx-calendar-day.hx-calendar-day-disabled {
    color: var(--occupancy-muted);
}

/* After the disabled rule: a booked day is never pickable, and muting it would only make
   it harder to read as booked. */
:is(.pf-page, .res-page) .hx-calendar .hx-calendar-day.day-taken,
.pf-swatch.day-taken {
    background: var(--occupancy-taken-bg);
    color: var(--occupancy-taken-fg);
}

/* The grid always shows six weeks. The neighbouring months' days fade, so the month in the
   heading stays the one on display. */
:is(.pf-page, .res-page) .hx-calendar .hx-calendar-day.hx-calendar-day-out {
    opacity: .45;
}

/* The colours above outweigh Havit's hover tint - a ring marks a pickable day instead. */
:is(.pf-page, .res-page) .hx-calendar .hx-calendar-day:not(.hx-calendar-day-disabled):hover {
    box-shadow: inset 0 0 0 1.5px var(--theme-strong, var(--theme-color));
}

/* wwwroot/styles/Pages/Components/reservationEdit.css */
/* Reservation edit - same "minimal canvas" treatment as the Ubyport settings and
   gallery administration: no coloured panel, white cards on the page background,
   brand accent only via the shared theme tokens (--theme-color / -strong / -tint).
   The tokens are activated by data-theme="<slug>" on .res-page, which supplies the
   values WITHOUT painting a brand-coloured background (see variables.css).

   Used exclusively by ReservationEdit and its components. */

.res-page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    text-align: left;
    color: #2c2c2a;
}

/* Samostatná hlavička se jménem nad obsahem tu není: jméno je vždy v kartě — v editoru
   v přehledové (.ov-who), u nové rezervace v rozhodovací (.rt-who). */

/* --- Status pills (.res-pill) live in Styles/Components/statusPill.css — they are
   shared with the reservation list grid, so they are not defined here. --- */

/* --- Tab picker ---
   On a phone the six tabs fold into a card naming the open one ("Tab 1 of 6 · Overview ·
   Change"), and a click unfolds them one under another with a note where something
   waits — the same object as the frame of the settings pages on a phone. From 992 px the
   card dissolves into a side menu (see "Side menu" below). */
.res-tabs-picker {
    margin-bottom: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--theme-strong, var(--theme-color)) 18%, #e3e3e0);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px -14px rgba(0, 0, 0, .35);
}

.res-tabs-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    color: #2c2c2a;
    cursor: pointer;
    transition: background-color .15s;
}

@media (hover: hover) {
    .res-tabs-toggle:hover {
        background: color-mix(in srgb, var(--theme-tint, #f1f5ee) 55%, #fff);
    }
}

.res-tabs-toggle:focus-visible {
    outline: 3px solid var(--theme-strong, var(--theme-color));
    outline-offset: -3px;
}

.res-tabs-picker.is-open .res-tabs-toggle {
    border-bottom: 1px solid #f0efeb;
    border-radius: 14px 14px 0 0;
}

.res-tabs-toggle-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: 1.1rem;
}

.res-tabs-toggle-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.res-tabs-toggle-text small {
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a8880;
}

.res-tabs-toggle-text strong {
    font-size: 1rem;
    font-weight: 700;
}

.res-tabs-toggle-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--theme-strong, var(--theme-color));
}

.res-tabs-toggle-label {
    position: relative;
}

.res-tabs-toggle-change .bi {
    transition: transform .15s;
}

.res-tabs-picker.is-open .res-tabs-toggle-change .bi {
    transform: rotate(180deg);
}

/* Something waits on another tab — which one, the dots in the unfolded list say. */
.res-tabs-dot {
    position: absolute;
    top: -4px;
    right: -8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9821f;
    box-shadow: 0 0 0 2px #fff;
}

.res-tabs {
    display: none;
}

.res-tabs-picker.is-open .res-tabs {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
}

.res-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #2c2c2a;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.res-tab .bi {
    width: 20px;
    color: #8a8880;
}

.res-tab:hover:not(.is-active) {
    background: color-mix(in srgb, var(--theme-strong, var(--theme-color)) 12%, transparent);
}

.res-tab.is-active {
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, var(--theme-color));
    font-weight: 600;
}

.res-tab.is-active .bi {
    color: inherit;
}

/* The tab wants attention — just a dot after its name, the note itself is in the tooltip. */
.res-tab-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: #c9821f;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.res-tab-dot.is-danger {
    background: #a32d2d;
}

/* --- Side menu (from 992 px) ---
   On a computer the tabs stand in a column left of the content, in the language of the
   settings menu (.ps-nav): icon and name, the open tab tinted in the house's colour. The
   card around them dissolves, the toggle goes, and the column rides along while a long
   overview scrolls. A tab that wants attention carries a dot after its name. The alerts
   above stay across both columns. */
@media (min-width: 992px) {
    .res-layout {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr);
        gap: 2rem;
        align-items: start;
    }

    .res-side {
        position: sticky;
        top: calc(var(--site-header-height, 0px) + 1rem);
    }

    .res-main {
        min-width: 0;
    }

    .res-side .res-tabs-picker {
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .res-side .res-tabs-toggle {
        display: none;
    }

    /* Also while the phone's menu was left open before the window grew. */
    .res-side .res-tabs-picker .res-tabs {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0;
    }

    .res-side .res-tab {
        display: grid;
        grid-template-columns: 1.1rem minmax(0, 1fr);
        align-items: center;
        column-gap: .6rem;
        padding: .5rem .7rem;
        border-radius: 9px;
        font-size: .9rem;
        font-weight: 500;
        line-height: 1.35;
        color: #4a4945;
    }

    .res-side .res-tab .bi {
        width: auto;
        text-align: center;
    }

    .res-side .res-tab:hover:not(.is-active) {
        background: #f3f2ee;
        color: #2c2c2a;
    }

    .res-side .res-tab.is-active {
        color: var(--theme-strong, var(--theme-color));
        font-weight: 600;
    }

    /* Inside the tile — the 2px gap leaves no room, an outer ring would cover the neighbours. */
    .res-side .res-tab:focus-visible {
        outline: 2px solid var(--theme-strong, var(--theme-color));
        outline-offset: -2px;
    }
}

/* --- Panels --- */
.res-panel {
    display: none;
}

.res-panel.is-active {
    display: block;
}

/* --- Cards ---
   The whole screen carries ONE brand colour — the accommodation's theme
   (green for the cottage, brown for the timber house), supplied by the
   --theme-* tokens via data-theme on .res-page. Every card gets a faint wash of
   that brand colour so the sections feel gently tinted without any per-section
   variation; the wash and borders are derived from --theme-strong with
   color-mix, so a theme change (green ↔ brown) recolours everything at once. */
.res-card {
    background: color-mix(in srgb, var(--theme-strong, var(--theme-color)) 5%, #fff);
    border: 1px solid color-mix(in srgb, var(--theme-strong, var(--theme-color)) 14%, #e3e3e0);
    border-radius: 14px;
    padding: 18px 20px 20px;
    margin-bottom: 1.25rem;
}

.res-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-strong, var(--theme-color)) 16%, #f0efeb);
}

.res-card-head > .bi {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: 1rem;
}

.res-card-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2c2c2a;
    line-height: 1.4;
}

.res-card-head p {
    margin: 2px 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: #6f6e6a;
}

/* Telefon: užší vnitřní okraj karty. S okrajem stránky zbývalo na 320 px pro obsah jen
   ~250 px a vnořené boxy (kalkulace, dlaždice) se v tom mačkaly. */
@media (max-width: 640px) {
    .res-card {
        padding: 14px 14px 16px;
    }

    .res-card-head {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }
}

/* Bílá karta: barvu objektu si nechává jen záložka Přehled, ostatní záložky jsou bílé
   s neutrálním rámečkem a barvu nesou jen stavové boxy, tlačítka a ikona u nadpisu. */
.res-card.is-plain {
    background: #fff;
    border-color: #e4e2db;
}

.res-card.is-plain .res-card-head {
    border-bottom-color: #efeee9;
}

/* Měkká karta veřejných stránek: zaoblení a stín jako karta s kontaktními údaji na úvodní stránce
   (.contact-card), aby formulář vedle ní nepůsobil jako kus administrace. */
.res-card.is-soft {
    padding: 20px 22px 22px;
    border-color: rgba(0, 0, 0, .07);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 32px -26px rgba(0, 0, 0, .55);
}

@media (max-width: 640px) {
    .res-card.is-soft {
        padding: 16px 16px 18px;
        border-radius: 18px;
    }
}

/* Hlavička jen s nadpisem (bez podtitulku): nadpis na střed ikony. */
.res-card-head.is-title-only {
    align-items: center;
}

/* Sbalitelná karta: <details>, hlavička je <summary> se šipkou vpravo. Sbalená ukáže pod
   nadpisem krátké shrnutí (jméno, počty), rozbalená ho schová — totéž je vidět v polích. */
.res-fold > summary {
    cursor: pointer;
    list-style: none;
}

.res-fold > summary::-webkit-details-marker {
    display: none;
}

.res-fold > summary:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 4px;
    border-radius: 8px;
}

.res-fold > summary > div {
    flex: 1;
    min-width: 0;
}

.res-fold[open] .res-fold-sum {
    display: none;
}

.res-fold-chevron {
    flex: none;
    color: #a3a29b;
    transition: transform .15s;
}

.res-fold[open] .res-fold-chevron {
    transform: rotate(90deg);
}

.res-fold:not([open]) {
    padding-bottom: 18px;
}

.res-fold:not([open]) > .res-card-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

@media (max-width: 640px) {
    .res-fold:not([open]) {
        padding-bottom: 14px;
    }
}

/* --- Field grid - neutralises the global rounded-white .input-container --- */
.res-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
    align-items: start;
}

.res-grid-3,
.res-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* A follow-up grid inside the same card (two field groups of the invoice editor). */
.res-grid + .res-grid {
    margin-top: 14px;
}

/* Věky dětí hned pod polem Děti, odsazené linkou, aby bylo vidět, ke kterému poli patří. */
.res-child-ages {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid #efeee9;
}

.res-span-2 {
    grid-column: 1 / -1;
}

.res-page .input-container {
    background: transparent;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.res-page label {
    display: block;
    text-align: left;
    font-size: .8rem;
    font-weight: 400;
    color: #6f6e6a;
    margin-bottom: 4px;
}

.res-page input,
.res-page textarea,
.res-page .form-control,
.res-page .form-select {
    width: 100%;
    padding: 8px 11px;
    font-size: .9rem;
    color: #2c2c2a;
    background: #fff;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    box-shadow: none;
    outline: none;
}

.res-page textarea {
    min-height: 90px;
    resize: vertical;
}

.res-page input:focus,
.res-page textarea:focus,
.res-page .form-control:focus,
.res-page .form-select:focus {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

.res-page .input-hint {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: #a3a29b;
}

.res-page .validation-message {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: #a32d2d;
}

/* HxInputDate wraps its input in .hx-form-group - strip the duplicated chrome
   so the date field matches the plain inputs next to it. */
.res-page .hx-form-group {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    font-size: inherit;
}

/* HxInputDate renders its calendar popup inside .input-container, so the broad
   field styling above leaks into the calendar's month/year <select>s - stretching
   them to full width with a grey box. Restore the calendar's own compact,
   borderless look (values mirror Havit's .form-select-sm defaults). The .hx-calendar
   scope keeps the fix off the real form selects sitting next to the calendar. */
.res-page .hx-calendar .form-select {
    width: auto;
    padding: 4px 28px 4px 8px;
    border-color: transparent;
    border-radius: 10px;
    background-color: transparent;
    /* The broad field rule above uses the `background` shorthand, which resets
       repeat/position to their initials - restore them so the chevron shows once
       instead of tiling into a zigzag. */
    background-repeat: no-repeat;
    background-position: right 8px center;
    box-shadow: none;
}

.res-page .hx-calendar .form-select:hover {
    background-color: #f4f2ec;
}

.res-page .hx-calendar .form-select:focus {
    border-color: var(--theme-strong, var(--theme-color));
    background-color: #fff;
    box-shadow: none;
}

/* --- Calendar days: the edited stay ----------------------------------------
   Same treatment as the public form (publicForm.css) so both screens read the
   stay identically. The occupancy colours come from Components/calendarOccupancy.css,
   bundled before this file: the range rules below weigh the same and win the tie by
   coming later - the stay being edited is drawn over the occupancy. Havit's own
   scoped stylesheet is linked after the global ones (see App.razor), so every rule
   carries one class more than the .hx-calendar-day-* rule it overrides. */

/* The whole stay stays visible in BOTH calendars: the nights between the two
   edge days only tinted, so arrival/departure keep reading as the boundaries.
   Not the plain --theme-tint: next to the pale green of a free day it would vanish.
   The days are separate tiles (calendarOccupancy.css), so the range is a run of
   highlighted tiles rather than one joined bar. */
.res-page .hx-calendar .hx-calendar-day.day-range-middle {
    background: color-mix(in srgb, var(--theme-color) 24%, #fff);
    color: var(--theme-strong, var(--theme-color));
    font-weight: 600;
    opacity: 1;
}

.res-page .hx-calendar .hx-calendar-day.day-range-start,
.res-page .hx-calendar .hx-calendar-day.day-range-end {
    background: var(--theme-color);
    color: #fff;
    font-weight: 600;
    opacity: 1;
}

/* --- Payment summary --- */
.res-summary {
    margin-top: 18px;
    padding: 12px 16px;
    border: 1px solid #e3e3e0;
    border-radius: 10px;
    background: #fbfaf7;
}

.res-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 4px 0;
    font-size: .85rem;
    color: #6f6e6a;
}

.res-summary-value {
    font-variant-numeric: tabular-nums;
    color: #2c2c2a;
}

.res-summary-row.is-total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #e6e4dc;
    font-weight: 600;
    font-size: .95rem;
    color: #2c2c2a;
}

.res-summary-row.is-total .res-summary-value {
    color: var(--theme-strong, var(--theme-color));
}

/* --- Reservation tab (rv-*) ---
   Bez stavu nahoře (ten ukazuje Přehled). Termín jako dvojice polí v šedém rámečku s počtem nocí,
   pod ním ostatní pole; Poznámky jsou sbalitelná karta (.res-fold) s hodnocením v malém boxu. */
.rv-fields {
    margin-top: 18px;
}

.rv-range {
    padding: 12px 14px 14px;
    border: 1px solid #e4e2db;
    border-radius: 12px;
    background: #faf9f6;
}

.rv-range-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: .9rem;
}

.rv-range-head > .bi {
    color: var(--theme-strong, var(--theme-color));
}

.rv-nights {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 2px 9px;
    border: 1px solid #e4e2db;
    border-radius: 999px;
    background: #fff;
    color: #5f5e5a;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Příjezd → odjezd vedle sebe i na telefonu. Šipka sedí na výšce polí, ne popisků; zarovnání
   shora drží pole v řadě, i když pod jedním vyskočí validační hláška. */
.rv-range-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.rv-range-arrow {
    display: grid;
    place-items: center;
    height: 40px;
    margin-top: 23px;
    color: #a3a29b;
}

/* Pole pod termínem po dvou (Stav + Ubytování, Zdroj + Platba): automatické sloupce by na
   počítači daly tři a platba by zůstala sama na řádku. */
.rv-range + .rv-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .rv-range + .rv-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

.res-page .inv-check.rv-notify {
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid #e4e2db;
    border-radius: 9px;
    background: #faf9f6;
    font-size: .85rem;
}

.rv-rating {
    padding: 12px 14px;
    border: 1px solid #e8e6df;
    border-radius: 12px;
    background: #faf9f6;
}

.rv-rating-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: .88rem;
    font-weight: 600;
    color: #2c2c2a;
}

.rv-rating-head > .bi {
    color: var(--theme-strong, var(--theme-color));
}

.rv-rating.is-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .85rem;
    color: #6f6e6a;
}

.rv-rating.is-locked > .bi {
    font-size: 1rem;
    color: #a3a29b;
}

.rv-rating.is-locked b {
    font-weight: 600;
    color: #2c2c2a;
    white-space: nowrap;
}

@media (max-width: 400px) {
    .rv-range {
        padding: 10px 10px 12px;
    }

    .rv-range-fields {
        gap: 4px;
    }

    .rv-range-fields input {
        padding-left: 8px;
        padding-right: 8px;
        font-size: .85rem;
    }
}

/* --- Check-in tab ---
   Stavový box (tón podle stavu) → časová osa tří kroků → lišta akcí na konci karty.
   Doručenky z Ubyportu jako samostatná rozbalovací karta (details). */
.ci-status {
    --ci-bg: #f7f6f2;
    --ci-line: #e0ddd3;
    --ci-fg: #5f5e5a;
    padding: 18px;
    border: 1px solid var(--ci-line);
    border-radius: 14px;
    background: var(--ci-bg);
}

.ci-status.is-info  { --ci-bg: #f2f6fd; --ci-line: #cddcf7; --ci-fg: #1d4ed8; }
.ci-status.is-ok    { --ci-bg: #f2f8f0; --ci-line: #cfe3c9; --ci-fg: #3d6b33; }
.ci-status.is-warn  { --ci-bg: #fdf7ec; --ci-line: #ecd9b4; --ci-fg: #8a5a17; }
.ci-status.is-error { --ci-bg: #fcf2f2; --ci-line: #eecccc; --ci-fg: #a32d2d; }

.ci-status-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ci-status-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ci-fg);
    color: #fff;
    font-size: 1.25rem;
}

.ci-status-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ci-status-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ci-fg);
}

.ci-status-line {
    font-size: .85rem;
    line-height: 1.45;
    color: #4a4945;
    overflow-wrap: anywhere;
}

.ci-flash {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: #fff;
    font-size: .82rem;
    line-height: 1.4;
}

.ci-flash.is-ok    { color: #3d6b33; border-color: #cfe3c9; }
.ci-flash.is-error { color: #a32d2d; border-color: #eecccc; }

.ci-steps {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.ci-step {
    position: relative;
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 0 12px;
    padding-bottom: 18px;
}

.ci-step:last-child {
    padding-bottom: 0;
}

.ci-step::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 30px;
    bottom: 0;
    width: 2px;
    background: #e6e4dc;
}

.ci-step:last-child::before {
    display: none;
}

.ci-step.is-done::before {
    background: #cfe3c9;
}

.ci-step-dot {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 2px solid #d6d3c9;
    border-radius: 50%;
    background: #fff;
    color: #a3a29b;
    font-size: .85rem;
}

.ci-step.is-done .ci-step-dot  { background: #3d6b33; border-color: #3d6b33; color: #fff; }
.ci-step.is-now .ci-step-dot   { border-color: #1d4ed8; color: #1d4ed8; box-shadow: 0 0 0 4px #e3ebfc; }
.ci-step.is-ready .ci-step-dot { border-color: var(--theme-color); color: var(--theme-strong, var(--theme-color)); box-shadow: 0 0 0 4px var(--theme-tint, #eef6ec); }
.ci-step.is-err .ci-step-dot   { background: #b7791f; border-color: #b7791f; color: #fff; }
.ci-step.is-skip .ci-step-dot  { border-style: dashed; }

.ci-step-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 4px;
}

.ci-step-title {
    font-size: .92rem;
    font-weight: 600;
    color: #2c2c2a;
}

.ci-step.is-todo .ci-step-title,
.ci-step.is-skip .ci-step-title {
    font-weight: 500;
    color: #8a8983;
}

.ci-step-meta {
    font-size: .8rem;
    color: #6f6e6a;
    overflow-wrap: anywhere;
}

.ci-step.is-err .ci-step-meta {
    color: #8a5a17;
}

/* Akce až na konci karty: nejdřív se čte stav a osa, pak se jedná. */
.ci-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #efeee9;
}

@media (max-width: 640px) {
    .ci-actions .res-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* Doručenky */
.res-card.ci-receipts {
    padding: 0;
}

.ci-receipts > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    list-style: none;
}

.ci-receipts > summary::-webkit-details-marker {
    display: none;
}

.ci-receipts > summary:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: -2px;
    border-radius: 14px;
}

.ci-receipts-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
}

.ci-receipts-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.ci-receipts-text b {
    font-size: .95rem;
    font-weight: 600;
    color: #2c2c2a;
}

.ci-receipts-text span {
    font-size: .78rem;
    color: #7a7974;
}

.ci-receipts-count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f0ec;
    color: #5f5e5a;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
}

.ci-receipts-chevron {
    color: #a3a29b;
    transition: transform .15s;
}

.ci-receipts[open] .ci-receipts-chevron {
    transform: rotate(90deg);
}

.ci-files {
    list-style: none;
    margin: 0 20px 20px;
    padding: 0;
    border: 1px solid #ebe9e2;
    border-radius: 12px;
}

.ci-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-top: 1px solid #f0efea;
}

.ci-file:first-child {
    border-top: 0;
}

.ci-file-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #fbeeee;
    color: #b4383a;
}

.ci-file-icon.is-warn {
    background: #fdf3e2;
    color: #8a5a17;
}

.ci-file-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.ci-file-text b {
    font-size: .86rem;
    font-weight: 600;
    color: #2c2c2a;
}

.ci-file-text > span {
    font-size: .76rem;
    color: #7a7974;
    font-variant-numeric: tabular-nums;
}

.ci-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 6px;
    background: #eef6ec;
    color: #3d6b33;
    font-size: .68rem;
    font-weight: 600;
    vertical-align: 1px;
}

.ci-chip.is-warn {
    background: #fdf3e2;
    color: #8a5a17;
}

.ci-file-actions {
    display: flex;
    gap: 4px;
}

/* HxButton přidává .btn — pravidlo pod .res-page ho přebije bez !important. */
.res-page .ci-icon-btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #e3e1d9;
    border-radius: 9px;
    background: #fff;
    color: #4a4945;
}

.res-page .ci-icon-btn:hover {
    background: #f7f6f2;
    color: #2c2c2a;
}

@media (max-width: 640px) {
    .ci-receipts > summary {
        padding: 12px 14px;
    }

    .ci-files {
        margin: 0 14px 14px;
    }
}

/* --- Channel pricing card (Booking) --- */
.res-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid #e6d9a8;
    border-left-width: 4px;
    border-radius: 10px;
    background: #fdf9ec;
    font-size: .88rem;
    line-height: 1.45;
    color: #6b5a1f;
}

.res-warning i {
    flex: 0 0 auto;
    margin-top: 2px;
}

/* Dopočtené pole v mřížce (zisk z kanálu): vypadá jako pole vedle sebe, protože ta tři čísla
   patří k sobě, ale psát se do něj nedá - proto klidnější podklad a kurzor bez příslibu. */
.res-computed-input {
    background-color: #f4f2ee;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.res-computed-input:focus {
    box-shadow: none;
}

/* --- Channel reservation code (Airbnb) --- */
.res-channel-ref {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px dashed #ddd9cc;
    border-radius: 10px;
    background: #fbfaf6;
}

.res-channel-ref-label {
    font-size: .7rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #a3a29b;
}

.res-channel-ref code {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .04em;
}

.res-channel-ref-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}

.res-channel-ref-link:hover code {
    text-decoration: underline;
}

/* --- Buttons ---
   HxButton emits Bootstrap's .btn alongside CssClass, so every rule here is
   scoped under .res-page to out-specify .btn / .btn-* without !important. */
.res-page .res-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, filter .15s;
}

.res-page .res-btn:disabled {
    opacity: .6;
    cursor: default;
}

.res-page .res-btn.is-primary {
    background: var(--theme-color);
    color: #fff;
}

.res-page .res-btn.is-primary:hover:not(:disabled) {
    filter: brightness(.9);
    color: #fff;
}

.res-page .res-btn.is-ghost {
    background: #fff;
    color: #5f5e5a;
    border-color: #d3d1c7;
}

.res-page .res-btn.is-ghost:hover:not(:disabled) {
    background: #f7f6f2;
    color: #2c2c2a;
}

.res-page .res-btn.is-success {
    background: #3d6b33;
    color: #fff;
}

.res-page .res-btn.is-success:hover:not(:disabled) {
    filter: brightness(.9);
    color: #fff;
}

.res-page .res-btn.is-info {
    background: #eef3fd;
    color: #1d4ed8;
    border-color: #d3e0f8;
}

.res-page .res-btn.is-info:hover:not(:disabled) {
    background: #e2eafc;
    color: #1d4ed8;
}

.res-page .res-btn.is-danger {
    background: #fff;
    color: #a32d2d;
    border-color: #eecccc;
}

.res-page .res-btn.is-danger:hover:not(:disabled) {
    background: #fceaea;
    color: #a32d2d;
}

/* --- Inline result message --- */
.res-result {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 14px;
    padding: 8px 13px;
    border-radius: 8px;
    font-size: .83rem;
    border: 1px solid transparent;
}

.res-result.is-ok {
    background: #eef6ec;
    color: #3d6b33;
    border-color: #cfe3c9;
}

.res-result.is-error {
    background: #fceaea;
    color: #a32d2d;
    border-color: #eecccc;
}

.res-empty {
    margin: 0;
    font-size: .85rem;
    color: #a3a29b;
}

.res-empty i {
    margin-right: .4rem;
}

/* --- Validation summary + action bar --- */
.res-validation ul {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 12px 16px;
    border: 1px solid #eecccc;
    border-radius: 10px;
    background: #fceaea;
    color: #a32d2d;
    font-size: .83rem;
}

.res-validation ul:empty {
    display: none;
}

.res-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid #e6e4dc;
}

.res-actions-trailing {
    margin-left: auto;
}

/* --- Loading / not-found placeholders --- */
.res-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 3rem;
    padding: 3rem 1.5rem;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    background: #fff;
    color: #6f6e6a;
    text-align: center;
}

.res-placeholder p {
    margin: 0;
    font-size: .95rem;
}

.res-placeholder .spinner-border {
    color: var(--theme-strong, var(--theme-color));
}

/* Loading state is a bare spinner - no card frame around it. */
.res-placeholder.is-loading {
    border: 0;
    background: none;
}

.res-placeholder.is-error .bi {
    font-size: 1.75rem;
    color: #a3a29b;
}

@media (max-width: 640px) {
    .res-actions-trailing {
        margin-left: 0;
    }

    .res-actions .res-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* --- Finance tab ---
   Karta „Platby“: stavový box Check-inu (.ci-status) doplněný o pruh „zaplaceno z celku“ a tři
   čísla, akce v .ci-actions. Ostatní karty záložky jsou sbalitelné (.res-fold) s počtem nebo
   částkou vpravo v hlavičce. */
.fin-progress {
    height: 8px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
}

.fin-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ci-fg);
}

.fin-figures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.fin-figure {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fin-figure span {
    font-size: .72rem;
    color: #6f6e6a;
}

.fin-figure b {
    font-size: .98rem;
    font-weight: 700;
    color: #2c2c2a;
    font-variant-numeric: tabular-nums;
}

.fin-figure.is-accent b {
    color: var(--ci-fg);
}

/* Na nejužších telefonech se „8 300,- Kč“ ve třetině boxu nevejde na řádek. */
@media (max-width: 400px) {
    .fin-figure b {
        font-size: .86rem;
    }
}

/* Počet a částka vpravo v hlavičce sbalitelné karty. */
.fin-fold-count {
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f0ec;
    color: #5f5e5a;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
}

.fin-fold-count.is-warn {
    background: #fdf3e2;
    color: #8a5a17;
}

.fin-fold-count.is-error {
    background: #fceaea;
    color: #a32d2d;
}

.fin-fold-amount {
    flex: none;
    font-size: .92rem;
    font-weight: 600;
    color: #2c2c2a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Přijaté platby jako řádky souborů (stejně jako doručenky check-inu). */
.fin-pays {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #ebe9e2;
    border-radius: 12px;
}

.fin-pay {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-top: 1px solid #f0efea;
}

.fin-pay:first-child {
    border-top: 0;
}

.fin-pay-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #eef6ec;
    color: #3d6b33;
}

.fin-pay-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.fin-pay-text b {
    font-size: .86rem;
    font-weight: 600;
    color: #2c2c2a;
}

.fin-pay-text span {
    font-size: .76rem;
    color: #7a7974;
    overflow-wrap: anywhere;
}

.fin-pay-amount {
    font-size: .88rem;
    font-weight: 600;
    color: #2c2c2a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Kalkulace na bílé kartě se skládá jako ostatní sbalitelné karty: šipka vpravo bez rámečku,
   rozbalená míří dolů. */
.res-page .pq-card.is-plain .pq-toggle {
    width: auto;
    border: 0;
    background: none;
    color: #a3a29b;
    transform: none;
}

.pq-card.is-plain .pq-toggle .bi {
    transform: rotate(-90deg);
    transition: transform .15s;
}

.pq-card.is-plain .pq-toggle.is-open .bi {
    transform: none;
}

/* Výsledek akce ve sbalitelné kartě (dokumenty k pobytu, doklad o provizi). */
.res-fold > .ci-flash {
    margin-top: 14px;
}

/* --- Invoices (finance tab) ---
   Row grid of the reservation's invoices. Follows the fee-lines editor pattern (pe-fees)
   but lives in the res-* palette of this screen. */
.inv-list {
    /* Sloupce drží jeden grid na seznamu a hlavička i řádky je přebírají přes subgrid.
       Každý řádek s vlastním gridem by si `auto` sloupec akcí spočítal jinak (v hlavičce
       je prázdný, v řádku široký jako tlačítka), takže by popisky nad sloupci ujížděly. */
    display: grid;
    grid-template-columns: 1.2fr .9fr .9fr .9fr 1fr 1fr auto;
    border: 1px solid #e4e2db;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.inv-head,
.inv-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    /* Širší mezera mezi sloupci: pravě zarovnaná částka by se jinak lepila na
       levě zarovnanou splatnost hned vedle. */
    gap: 10px 28px;
    align-items: center;
    padding: 9px 16px;
}

.inv-head {
    font-size: .78rem;
    color: #6f6e6a;
    background: #faf9f6;
    border-bottom: 1px solid #ebe9e2;
}

.inv-row {
    font-size: .88rem;
    border-bottom: 1px solid #f0efeb;
}

.inv-row:last-child {
    border-bottom: none;
}

.inv-row p {
    margin: 0;
    line-height: 1.35;
}

.inv-number {
    font-weight: 600;
    color: #2c2c2a;
}

.inv-sub {
    font-size: .76rem;
    color: #8a897f;
}

/* Faktura po splatnosti. Sémantická, ne značková červená — stejná jako v seznamu faktur
   (.il-overdue) i u hosta v Mých rezervacích. Pruh vlevo místo podbarvení celého řádku:
   dlaždice tlačítek a štítky na podbarvení ztrácejí kontrast. */
.inv-row.is-overdue {
    box-shadow: inset 3px 0 0 #b3261e;
}

/* Faktura, na kterou odkázala kontrola ve statistikách. Jen podklad — levý pruh patří
   „po splatnosti“ a zvýrazněný řádek ho má skoro vždycky zároveň. */
.inv-row.is-focused {
    background: color-mix(in srgb, var(--theme-strong, var(--theme-color)) 10%, #fff);
}

.inv-overdue-date {
    color: #b3261e;
    font-weight: 600;
}

.inv-status {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* Přepočet částky do základní měny pod polem "Částka" v editoru faktury. */
.inv-hint {
    margin: 4px 0 0;
    font-size: .78rem;
    color: #8a897f;
    font-variant-numeric: tabular-nums;
}

/* Zaškrtávátko "Nefakturovat" pod poli dokladu — popisek a vysvětlení pod sebou vedle boxu.
   Selektory nesou .res-page schválně: bez něj vyhraje obecnější `.res-page label`
   (display: block) a `.res-page input` (width: 100 %), takže se z boxu stane pole přes
   celou šířku a text spadne pod něj. */
.res-page .inv-check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 0;
    font-size: .88rem;
    color: #2c2c2a;
    cursor: pointer;
}

    .res-page .inv-check input {
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        padding: 0;
        margin: .15rem 0 0;
        accent-color: var(--theme-color);
    }

    .res-page .inv-check small {
        display: block;
        margin-top: 2px;
        font-size: .78rem;
        color: #8a897f;
    }

.inv-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.inv-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.inv-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}

/* Two groups on one row: what adds to the calculation on the left, what closes it
   (save / recalculate / invoice) on the right. */
.inv-toolbar.is-split {
    justify-content: space-between;
}

.inv-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- Dokumenty k pobytu (záložka Dokumenty: pobytový poukaz, informace k příjezdu) ---
   Řádek na dokument: ikona | název se stavem pod ním | samostatná tlačítka tisk, PDF, kopírovat
   (jako u faktur) | nejvýš jedno hlavní tlačítko. Od 576 px sdílejí řádky jednu mřížku
   (subgrid), takže tlačítka obou dokumentů stojí pod sebou a hlavní tlačítka jsou stejně široká.
   Na telefonu jdou tlačítka pod název a hlavní tlačítko přes celou šířku. */
.stay-doc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stay-doc {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 14px 0;
}

.stay-doc:first-child {
    padding-top: 0;
}

.stay-doc:last-child {
    padding-bottom: 0;
}

.stay-doc + .stay-doc {
    border-top: 1px solid #efeee9;
}

/* Ve sloupci ikony hlavičky karty: 34 px jako .res-card-head > .bi a s mezerou 12 px jako
   hlavička (2 px okraje + 10 px gap řádku), takže ikona sedí na střed pod ikonou karty a název
   začíná pod nadpisem. Svisle na střed řádku jako název a PDF (zalomí-li se štítek pod název,
   sedí ikona mezi nimi). */
.stay-doc-icon {
    flex: none;
    width: 34px;
    margin-right: 2px;
    text-align: center;
    font-size: 1.1rem;
    color: #6f6e6a;
}

/* Štítek stavu pod názvem. */
.stay-doc-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}

.stay-doc-title {
    font-size: .92rem;
    font-weight: 600;
    color: #2c2c2a;
}

.stay-doc-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
}

.stay-doc-pill.is-ok {
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, #3d6b33);
}

.stay-doc-pill.is-warn {
    background: #fdf0d9;
    color: #8a5a12;
}

/* Tisk, PDF a kopírování: samostatná tlačítka jako u faktur (.pe-icon-btn), jen vysoká jako
   hlavní tlačítko vedle. Kopírování má i krátký popisek — u kanálu je to krok před označením. */
.stay-doc-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.stay-doc-tools .pe-icon-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

.stay-doc-tools .pe-icon-btn.is-labeled {
    width: auto;
    gap: 7px;
    padding: 0 14px;
    font-size: .88rem;
}

.stay-doc-actions .res-btn {
    width: 100%;
    justify-content: center;
}

.stay-doc-actions:empty {
    display: none;
}

/* Telefon: tlačítka pod název přes celou šířku řádku, hlavní tlačítko pod nimi. */
@media (max-width: 575.98px) {
    .stay-doc-tools,
    .stay-doc-actions {
        grid-column: 1 / -1;
    }
}

/* Sloupce: ikona | název se stavem | tlačítka | hlavní tlačítko. Sloupec hlavního tlačítka má
   šířku nejširšího z nich, takže jsou obě stejně široká. Dokument, který ještě nevznikl, tlačítka
   nemá — jeho název s větou, kdy odejde, si vezme i jejich místo. */
@media (min-width: 576px) {
    .stay-doc-list {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        column-gap: 14px;
    }

    .stay-doc {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        column-gap: 14px;
    }

    .stay-doc-pill {
        white-space: nowrap;
    }

    .stay-doc.is-upcoming .stay-doc-main {
        grid-column: 2 / -1;
    }

    .stay-doc-tools {
        grid-column: 3;
        justify-content: flex-end;
    }

    .stay-doc-actions {
        grid-column: 4;
        min-width: 200px;
    }
}

/* Dokument, který ještě nevznikl: šedě, místo štítku věta, kdy odejde. */
.stay-doc.is-upcoming .stay-doc-icon,
.stay-doc.is-upcoming .stay-doc-title {
    color: #8d8c86;
}

.stay-doc-sub {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: .8rem;
    line-height: 1.4;
    color: #6f6e6a;
}

.docs-empty {
    margin: 0;
    font-size: .88rem;
    color: #6f6e6a;
}

/* Odkazy na dokumenty, které mají svou záložku (faktury, doklad o provizi, doručenky). */
.docs-elsewhere-label {
    margin: 0 0 8px;
    font-size: .78rem;
    color: #6f6e6a;
}

.docs-elsewhere {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.docs-elsewhere button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #e3e1d9;
    border-radius: 999px;
    background: #fff;
    font-size: .82rem;
    color: #3a3a38;
    cursor: pointer;
}

.docs-elsewhere button:hover {
    border-color: #c9c7bd;
    background: #fafaf7;
}

.docs-elsewhere .bi:first-child {
    color: #6f6e6a;
}

.docs-elsewhere b {
    font-weight: 600;
}

.docs-elsewhere .bi-arrow-right {
    font-size: .75rem;
    color: #8d8c86;
}

.inv-errors {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.inv-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

/* --- Skupiny polí dokladu (InvoiceFieldsEditor): Doklad / Platba / Odběratel ---
   Na počítači jen za sebou poskládané mřížky polí, hlavičky skupin skryté. Na telefonu je každá
   skupina skládací karta se souhrnem v hlavičce („Plná · 20260117 · 8 300,- Kč“), pole po dvou. */
.inv-group-head {
    display: none;
}

.inv-group + .inv-group {
    margin-top: 14px;
}

@media (max-width: 640px) {
    .inv-groups {
        display: grid;
        gap: 8px;
    }

    .inv-group {
        overflow: hidden;
        border: 1px solid #e3e3e0;
        border-radius: 12px;
        background: #fff;
    }

    .inv-group + .inv-group {
        margin-top: 0;
    }

    .inv-group-head {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 12px;
        border: 0;
        background: none;
        font: inherit;
        color: inherit;
        text-align: left;
        cursor: pointer;
    }

    .inv-group-head > .bi:first-child {
        display: grid;
        place-items: center;
        flex: none;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: var(--theme-tint, #eef6ec);
        color: var(--theme-strong, var(--theme-color));
    }

    .inv-group-head > span {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }

    .inv-group-head strong {
        font-size: .92rem;
        font-weight: 600;
        color: #2c2c2a;
    }

    .inv-group-head small {
        overflow: hidden;
        font-size: .78rem;
        color: #6f6e6a;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .inv-group-chev {
        color: #a3a29b;
        transition: transform .15s;
    }

    .inv-group.is-open .inv-group-chev {
        transform: rotate(180deg);
    }

    .inv-group-body {
        display: none;
        padding: 12px 12px 14px;
        border-top: 1px solid #f0efeb;
    }

    .inv-group.is-open .inv-group-body {
        display: block;
    }

    /* Pole po dvou; účet, odběratel a adresa jsou na půl šířky moc dlouhé. */
    .inv-fields.res-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
    }

    .inv-fields .inv-f-wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .inv-head {
        display: none;
    }

    .inv-list {
        grid-template-columns: 1fr;
    }

    .inv-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }

    .inv-actions {
        grid-column: 1 / -1;
    }
}

/* Typ a „splatnost“ před datem jen na telefonu, kde typ nemá vlastní sloupec. */
.inv-due-prefix {
    display: none;
}

/* Telefon: řádek faktury jako výpis z banky — číslo vlevo a částka vpravo nahoře, pod nimi
   typ se splatností a stav, ikony akcí na vlastním řádku. Částka jen jedna, v měně dokladu;
   korunový přepočet pod ní jen u cizí měny (.is-foreign). */
@media (max-width: 640px) {
    .inv-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "no amount"
            "no czk"
            "due status"
            "actions actions";
        gap: 4px 10px;
        padding: 12px;
    }

    .inv-row > :first-child {
        grid-area: no;
    }

    .inv-row > .inv-type,
    .inv-row > .inv-amount {
        display: none;
    }

    .inv-row > .inv-amount-czk,
    .inv-row.is-foreign > .inv-amount {
        display: block;
        grid-area: amount;
        align-self: start;
        font-size: 1rem;
        font-weight: 700;
        color: #2c2c2a;
    }

    .inv-row.is-foreign > .inv-amount-czk {
        grid-area: czk;
        font-size: .8rem;
        font-weight: 400;
        color: #8a897f;
    }

    .inv-row > .inv-due {
        grid-area: due;
        align-self: center;
        font-size: .82rem;
        color: #6f6e6a;
    }

    .inv-due-prefix {
        display: inline;
    }

    .inv-row > .inv-status {
        grid-area: status;
        align-items: flex-end;
    }

    .inv-row > .inv-actions {
        grid-area: actions;
        justify-content: flex-start;
        gap: 6px;
        margin-top: 8px;
        padding-top: 10px;
        border-top: 1px solid #f0efeb;
    }

    .inv-row .pe-icon-btn {
        width: 36px;
        height: 36px;
        font-size: .95rem;
    }

    /* Smazání stranou od ostatních akcí, ať se netrefí místo úpravy. */
    .inv-row .pe-icon-btn.is-danger {
        margin-left: auto;
    }

    .inv-toolbar.is-split {
        flex-direction: column;
        align-items: stretch;
    }

    .inv-toolbar .res-btn {
        justify-content: center;
    }

    .res-summary {
        padding: 10px 12px;
    }

    .res-summary-value {
        white-space: nowrap;
    }
}

/* ── Price calculation (kalkulace) ──────────────────────────────────────────
   Sits above the invoice grid and shares its look; the difference is that every
   line is editable, so the columns are inputs rather than text. */
.pq-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    margin-bottom: .75rem;
    font-size: .82rem;
    color: #6f6e6a;
}

.pq-sub {
    color: #8a8880;
}

.pq-list {
    border: 1px solid color-mix(in srgb, var(--theme-strong, var(--theme-color)) 14%, #e3e3e0);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.pq-head,
.pq-row {
    display: grid;
    grid-template-columns: 2.4fr .8fr 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 14px;
}

.pq-head {
    font-size: .78rem;
    color: #6f6e6a;
    background: color-mix(in srgb, var(--theme-strong, var(--theme-color)) 6%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-strong, var(--theme-color)) 14%, #eee);
}

.pq-row {
    font-size: .88rem;
    border-bottom: 1px solid #f0efeb;
}

.pq-row:last-child {
    border-bottom: none;
}

.pq-row .form-control {
    padding: .3rem .55rem;
    font-size: .88rem;
}

.pq-total {
    font-weight: 600;
    white-space: nowrap;
}

/* A discount carries a negative amount — mark the whole row so it reads as a deduction
   and not as a mistyped price. */
.pq-row.is-discount {
    background: #fbf6ee;
}

.pq-row.is-discount .pq-total {
    color: #a3671d;
}

/* Picker of the price-list fees the calculation leaves to the admin. Dressed as a ghost
   button so it sits in the toolbar next to "add item" as one more way of adding a line. */
.res-page .pq-fee-pick {
    max-width: 320px;
    padding: 9px 36px 9px 14px;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235f5e5a' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center / 12px;
    color: #5f5e5a;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.4;
    appearance: none;
    cursor: pointer;
}

.res-page .pq-fee-pick:hover:not(:disabled) {
    background-color: #f7f6f2;
    color: #2c2c2a;
}

.res-page .pq-fee-pick:disabled {
    opacity: .6;
    cursor: default;
}

.pq-discount {
    margin-top: 14px;
    padding: 16px;
    border: 1px dashed #e0c9a3;
    border-radius: 12px;
    background: #fdfaf5;
}

.pq-discount > header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.pq-discount > header .bi {
    color: #a3671d;
    font-size: 1.05rem;
}

.pq-discount > header h3 {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: #2c2c2a;
}

.pq-discount > header p {
    margin: 2px 0 0;
    font-size: .8rem;
    color: #6f6e6a;
}

/* Segmented switch for the discount unit. Two buttons instead of a <select> — the mode is a
   bool, and Blazor renders a bool-valued `value` attribute as an HTML boolean attribute, which
   leaves the select showing nothing. */
.res-page .pq-modes {
    display: flex;
    gap: 0;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.res-page .pq-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 10px;
    border: none;
    background: #fff;
    color: #5f5e5a;
    font-size: .85rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.res-page .pq-mode + .pq-mode {
    border-left: 1px solid #e6e3d9;
}

.res-page .pq-mode:hover:not(.is-active) {
    background: #f7f6f2;
    color: #2c2c2a;
}

.res-page .pq-mode.is-active {
    background: #a3671d;
    color: #fff;
}

/* Value input with its unit glued to the right, so the field says whether it takes Kč or %. */
.res-page .pq-value {
    display: flex;
    align-items: stretch;
}

.res-page .pq-value .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.res-page .pq-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #d3d1c7;
    border-left: none;
    border-radius: 0 8px 8px 0;
    background: #f4f2ec;
    color: #5f5e5a;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
}

.pq-discount-preview {
    margin: 12px 0 0;
    font-size: .85rem;
    color: #5f5e5a;
}

.pq-discount-preview strong {
    color: #a3671d;
    white-space: nowrap;
}

.pq-plan {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 10px 14px;
    background: var(--theme-tint, #f4f2ee);
    border-radius: 10px;
    font-size: .85rem;
}

/* The card folds: the calculation is a long editable table, and on a reservation
   whose price is settled the Finance tab is about the invoices below it. Folded, the
   header carries the total, so the card still says the one thing it is there for. */
.pq-card .res-card-head.is-toggle {
    cursor: pointer;
    user-select: none;
}

/* No bottom rule when there is nothing underneath — folded, the header IS the card. */
.pq-card .res-card-head.is-toggle:has(.pq-toggle:not(.is-open)) {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.pq-head-aside {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-left: 10px;
}

.pq-head-total {
    font-size: .95rem;
    font-weight: 600;
    color: var(--theme-strong, var(--theme-color));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The guest's number next to the crown total when the offer goes out in another currency. */
.pq-head-offer {
    font-size: .85rem;
    color: #6f6e6a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pq-head-offer::before {
    content: "·";
    margin-right: 8px;
}

/* --- Offer currency picker in the summary --- */
/* Compact segmented buttons on the right of the row, the same control as the discount mode
   but sized for three currency codes, not two labelled options. */
.res-page .pq-currency-modes {
    flex: 0 0 auto;
}

.res-page .pq-currency-modes .pq-mode {
    flex: 0 0 auto;
    padding: 4px 12px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.res-summary-row.is-offer {
    color: #2c2c2a;
}

.res-summary-row.is-offer small {
    margin-left: 6px;
    font-size: .75rem;
    color: #8a8984;
}

.res-summary-row.is-offer .res-summary-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.res-page .pq-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--theme-strong, var(--theme-color)) 20%, #e3e3e0);
    border-radius: 8px;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    transition: transform .15s ease, background-color .15s ease;
}

.res-page .pq-toggle:hover {
    background: var(--theme-tint, #f1f5ee);
}

.res-page .pq-toggle.is-open {
    transform: rotate(180deg);
}

@media (max-width: 780px) {
    .pq-head {
        display: none;
    }

    .pq-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px 10px;
    }
}

/* --- Kalkulace na telefonu: účtenka, nabídka „Přidat“, souhrn a panel zdola ---
   Do 640 px se tabulka polí, souhrn a lišta přidávání schovají a místo nich se ukáže účtenka
   (položka celá, pod ní „2 × 3 500 Kč“, vpravo částka). Klepnutí na položku ji otevře v panelu
   vysunutém zdola; obojí píše do týchž řádků, takže uložení je pořád jedno tlačítko.
   Na počítači jsou telefonní části skryté. */
.pq-receipt,
.pq-add,
.pq-sum,
.pq-discount-backdrop {
    display: none;
}

/* Podklad pod panelem a panel samotný. Vykreslují se jen po klepnutí na položku účtenky,
   a ta je jen na telefonu. */
.pq-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(20, 20, 18, .4);
}

.pq-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1051;
    max-height: 88vh;
    overflow-y: auto;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    background: #fff;
    box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, .35);
    animation: pq-sheet-in .18s ease-out;
}

@keyframes pq-sheet-in {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
}

.pq-sheet-grip {
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 2px;
    background: #d8d6cd;
}

.pq-sheet h3 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #2c2c2a;
}

/* Popisek nad polem v panelu. Váhu nese .res-page, jinak by vyhrálo obecné `.res-page label`. */
.res-page label.pq-f {
    display: grid;
    gap: 4px;
    margin: 0 0 10px;
    font-size: .78rem;
    color: #6f6e6a;
}

.res-page .pq-f .form-control {
    font-size: .95rem;
}

.pq-f-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 10px;
}

.pq-sheet-sum {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fbfaf7;
    font-size: .88rem;
    color: #6f6e6a;
}

.pq-sheet-sum strong {
    color: #2c2c2a;
    white-space: nowrap;
}

.pq-sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 8px;
}

.res-page .pq-sheet-actions .res-btn {
    justify-content: center;
    padding: 11px 10px;
}

@media (max-width: 640px) {
    .pq-quote .pq-list,
    .pq-quote .res-summary,
    .pq-quote .inv-toolbar-group:first-child,
    .pq-quote .pq-label {
        display: none;
    }

    /* Dlouhý popis pod nadpisem kalkulace i faktury: na telefonu jen nadpis, částka a šipka. */
    .pq-card .res-card-head {
        align-items: center;
    }

    .pq-card .res-card-head p {
        display: none;
    }

    .pq-head-total {
        font-size: .9rem;
    }

    /* Složená hlavička na telefonu: jen částka a šipka. Štítek „Ručně upraveno“ ji vytlačil
       z karty; po rozbalení je dál vidět v řádku .pq-meta. */
    .pq-head-pill {
        display: none;
    }

    .pq-receipt {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
        border: 1px solid color-mix(in srgb, var(--theme-strong, var(--theme-color)) 14%, #e3e3e0);
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
    }

    .pq-item + .pq-item {
        border-top: 1px solid #f0efeb;
    }

    .pq-item.is-discount {
        background: #fbf6ee;
    }

    .pq-item-view {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto 12px;
        grid-template-areas:
            "name total go"
            "calc calc go";
        align-items: center;
        gap: 2px 10px;
        width: 100%;
        padding: 11px 12px;
        border: 0;
        background: none;
        font: inherit;
        color: inherit;
        text-align: left;
        cursor: pointer;
    }

    .pq-item-view:active:not(:disabled) {
        background: var(--theme-tint, #eef6ec);
    }

    .pq-item-name {
        grid-area: name;
        font-size: .92rem;
        font-weight: 600;
        color: #2c2c2a;
        overflow-wrap: anywhere;
    }

    .pq-item-total {
        grid-area: total;
        font-size: .92rem;
        font-weight: 600;
        color: #2c2c2a;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .pq-item.is-discount .pq-item-total {
        color: #a3671d;
    }

    .pq-item-calc {
        grid-area: calc;
        font-size: .8rem;
        color: #8a8880;
        font-variant-numeric: tabular-nums;
    }

    .pq-item-go {
        grid-area: go;
        font-size: .75rem;
        color: #c4c2b8;
    }

    /* Přidávání: jedno tlačítko, nabídka se rozbalí pod ním a odsune obsah (žádné plovoucí menu,
       které by na telefonu přesahovalo kartu). */
    .pq-add {
        display: block;
        margin-top: 10px;
    }

    .pq-add-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 10px;
        border: 1px dashed color-mix(in srgb, var(--theme-strong, var(--theme-color)) 35%, #d3d1c7);
        border-radius: 10px;
        background: #fff;
        color: var(--theme-strong, var(--theme-color));
        font-size: .9rem;
        font-weight: 600;
    }

    .pq-add-btn:disabled {
        opacity: .6;
    }

    .pq-add-btn .bi-chevron-down {
        font-size: .75rem;
        transition: transform .15s;
    }

    .pq-add-btn.is-open .bi-chevron-down {
        transform: rotate(180deg);
    }

    .pq-add-menu {
        margin-top: 6px;
        overflow: hidden;
        border: 1px solid #e3e3e0;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .4);
    }

    .pq-add-menu button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 11px 14px;
        border: 0;
        border-top: 1px solid #f0efeb;
        background: #fff;
        color: #2c2c2a;
        font-size: .9rem;
        text-align: left;
    }

    .pq-add-menu button:first-child {
        border-top: 0;
    }

    .pq-add-menu button:disabled {
        color: #a3a29b;
    }

    .pq-add-menu button .bi {
        color: var(--theme-strong, var(--theme-color));
    }

    .pq-add-menu small {
        margin-left: auto;
        font-size: .8rem;
        color: #8a8880;
        white-space: nowrap;
    }

    .pq-add-menu-head {
        display: block;
        padding: 8px 14px 5px;
        border-top: 1px solid #f0efeb;
        background: #fbfaf7;
        font-size: .68rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #a3a29b;
    }

    .pq-sum {
        display: block;
        margin-top: 14px;
        padding: 12px 14px;
        border: 1px solid #e3e3e0;
        border-radius: 12px;
        background: #fbfaf7;
    }

    .pq-sum-total {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 10px;
    }

    .pq-sum-total span {
        font-size: .85rem;
        color: #6f6e6a;
    }

    .pq-sum-total strong {
        margin-left: auto;
        font-size: 1.3rem;
        color: var(--theme-strong, var(--theme-color));
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .pq-sum-currency {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #e6e4dc;
        font-size: .85rem;
        color: #6f6e6a;
    }

    .pq-sum-offer {
        margin-left: auto;
        font-weight: 600;
        color: #2c2c2a;
        white-space: nowrap;
    }

    .pq-sum-offer small {
        font-weight: 400;
        color: #8a8880;
    }

    /* Zbylá skupina lišty: Přepočítat jako ikona, Uložit přes zbytek řádku. */
    .pq-quote .inv-toolbar {
        display: block;
    }

    .pq-quote .inv-toolbar-group:last-child {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 8px;
    }

    .res-page .pq-quote .inv-toolbar-group .res-btn {
        justify-content: center;
        padding: 10px;
    }

    /* Sleva na telefonu stejně jako úprava položky: panel zdola nad podkladem. */
    .pq-discount-backdrop {
        display: block;
    }

    .pq-quote .pq-discount {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1051;
        max-height: 88vh;
        overflow-y: auto;
        margin: 0;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 18px 18px 0 0;
        background: #fff;
        box-shadow: 0 -12px 30px -14px rgba(0, 0, 0, .35);
        animation: pq-sheet-in .18s ease-out;
    }

    /* Pole slevy pod sebou — vedle sebe by se přepínač „Částka v Kč | Procento z ceny“ usekl. */
    .pq-quote .pq-discount .res-grid {
        grid-template-columns: 1fr;
    }

    .pq-quote .pq-discount .inv-editor-actions {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
    }

    .res-page .pq-quote .pq-discount .inv-editor-actions .res-btn {
        justify-content: center;
    }
}

/* Plán ve faktuře k vystavení stojí nad poli (v kalkulaci pod souhrnem), takže mezeru potřebuje
   pod sebou, ne nad sebou — jinak se lepí na první popisek. */
.inv-draft .pq-plan {
    margin: 0 0 14px;
}

/* Jak host zaplatí — věta plánu v dokladu k vystavení: tučně platba, pod ní co se vystaví,
   vpravo „Změnit“. Možnosti se rozbalí pod ní; volba se hned uloží a doklad předvyplní znovu. */
.inv-pay-line > .bi {
    flex: none;
    margin-top: 1px;
}

.inv-pay-line-body {
    flex: 1;
    min-width: 0;
}

.inv-pay-line-body strong {
    display: block;
    font-weight: 600;
}

.inv-pay-link {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--theme-strong, var(--theme-color));
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.inv-pay-link:disabled {
    opacity: .5;
    cursor: default;
}

.inv-pay-choices {
    display: grid;
    gap: 6px;
    margin: -6px 0 14px;
}

/* Váhu nese .res-page — jinak vyhraje `.res-page label` (block) a `.res-page input` (100 %). */
.res-page label.inv-pay-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #e3e3e0;
    border-radius: 10px;
    background: #fff;
    font-size: .88rem;
    color: #2c2c2a;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.res-page label.inv-pay-choice:hover {
    border-color: #cfcdc4;
}

.res-page label.inv-pay-choice.is-active {
    border-color: var(--theme-strong, var(--theme-color));
    background: color-mix(in srgb, var(--theme-strong, var(--theme-color)) 8%, #fff);
}

.res-page .inv-pay-choice input {
    flex: none;
    width: 15px;
    height: 15px;
    margin: 3px 0 0;
    padding: 0;
    accent-color: var(--theme-color);
}

.inv-pay-choice small {
    display: block;
    font-size: .8rem;
    color: #6f6e6a;
}
/* ---------------------------------------------------------------------------
   Messages tab — the reservation's conversation.

   Outbound and inbound are told apart by side and colour, internal notes by a
   third, deliberately unbranded treatment: a note must never be mistaken for
   something the guest can see.

   Timeline, bubliny a psaní sdílí záložka rezervace se schránkou zpráv; co je jen
   pro záložku (bílá karta .msg-card), je v bloku „Messages tab card“ níž.
   --------------------------------------------------------------------------- */

.msg-empty {
    margin: 0;
    padding: 18px 0;
    color: var(--text-muted, #6b7280);
    font-size: 0.92rem;
}

.msg-timeline {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.msg-bubble {
    max-width: 85%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: #f6f6f4;
    color: #2c2c2a;
}

.msg-bubble.is-out {
    align-self: flex-end;
    background: var(--theme-tint, #eef6ec);
    border-color: color-mix(in srgb, var(--theme-color, #228b22) 25%, transparent);
}

.msg-bubble.is-in {
    align-self: flex-start;
    background: #fff;
    border-color: #e2e2dd;
}

.msg-bubble.is-note {
    align-self: stretch;
    max-width: 100%;
    background: repeating-linear-gradient(45deg, #fdfbf3, #fdfbf3 10px, #faf6e8 10px, #faf6e8 20px);
    border-color: #e6dcb8;
}

/* A message that arrived after the operator last looked. */
.msg-bubble.is-new {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-strong, #206815) 35%, transparent);
}

.msg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
}

.msg-from {
    font-weight: 600;
    color: var(--theme-strong, #206815);
}

.msg-bubble.is-note .msg-from {
    color: #8a6d1f;
}

.msg-delivery {
    padding: 1px 8px;
    border-radius: 999px;
    background: #fdecec;
    color: #a12626;
    font-weight: 600;
}

/* Automatic mail: a full-width quiet line in the log, mirrored from the guest
   thread (gmsg-auto) so both sides record the same event the same way. */
.msg-auto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px dashed #dcdcd5;
    background: #fbfbf9;
    color: var(--text-muted, #6b7280);
    font-size: 0.86rem;
    line-height: 1.45;
}

.msg-auto-ico {
    flex: none;
    margin-top: 1px;
    font-size: 1rem;
    color: var(--theme-strong, #206815);
}

.msg-auto-txt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.msg-auto-txt strong {
    font-weight: 600;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

.msg-auto .msg-delivery {
    margin-left: auto;
}

.msg-body {
    font-size: 0.94rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.msg-error {
    margin: 6px 0 0;
    color: #a12626;
    font-size: 0.85rem;
}

.msg-composer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8e8e3;
}

.msg-composer label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
}

.msg-composer textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d8d8d2;
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

.msg-composer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

/* --- Pictures in the composer ------------------------------------------------
   The picker is a label wrapping the file input, same construction as the channel
   documents above: the input is hidden and the visible control is ours. Scoped to
   .msg-composer rather than .res-page because the composer also lives on the
   standalone thread page, which is not a reservation editor.                      */

.msg-composer-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.msg-composer .msg-attach-btn {
    margin: 0;
    cursor: pointer;
}

.msg-composer .msg-attach-btn.is-disabled {
    opacity: .6;
    cursor: default;
}

.msg-composer .msg-attach-btn input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.msg-attach-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.msg-attach-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    max-width: 260px;
    padding: 6px 8px 6px 6px;
    border: 1px solid #e2e2dd;
    border-radius: 10px;
    background: #fafaf7;
}

.msg-attach-thumb {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: #eeeee9;
}

.msg-attach-thumb.is-blank {
    display: grid;
    place-items: center;
    color: #8b8f88;
    font-size: 1.2rem;
}

.msg-attach-name {
    font-size: .82rem;
    font-weight: 600;
    color: #2c2c2a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-attach-size {
    grid-column: 2;
    font-size: .74rem;
    color: #6f6e6a;
}

.msg-attach-remove {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6f6e6a;
    cursor: pointer;
    font-size: .8rem;
}

.msg-attach-remove:hover:not(:disabled) {
    background: #eeeee9;
    color: #a12626;
}

.msg-attach-remove:disabled {
    opacity: .5;
    cursor: default;
}

@media (max-width: 640px) {
    .msg-bubble {
        max-width: 100%;
    }
}

/* --- Messages tab card (.msg-card) --------------------------------------------
   Bílá karta jako Check-in: stav konverzace jen štítkem v hlavičce, čekající žádost
   o změnu jantarovým boxem nad konverzací, psaní ve vlastním boxu, Uzavřít v liště
   .ci-actions na konci. Prázdno / uzavřeno / bez e-mailu = šedý box .msg-note.     */

.msg-head-pill {
    margin-left: auto;
}

/* Host na bílé kartě světle šedý — bílá bublina na bílé splývala; naše zůstávají v odstínu objektu. */
.msg-card .msg-bubble.is-in {
    background: #f6f5f1;
    border-color: #e9e7e0;
}

/* Nová zpráva hosta: jantarový prstenec jako štítek „Čeká na odpověď“, ne barva objektu. */
.msg-card .msg-bubble.is-new {
    box-shadow: none;
}

.msg-card .msg-bubble.is-in.is-new {
    box-shadow: 0 0 0 2px #ecd9b4;
}

.msg-new {
    padding: 1px 7px;
    border-radius: 999px;
    background: #b7791f;
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
}

.msg-card .msg-timeline {
    margin: 0;
}

.msg-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #e6e4dc;
    border-radius: 12px;
    background: #f7f6f2;
    color: #4a4945;
    font-size: .86rem;
    line-height: 1.45;
}

.msg-card > .res-card-head + .msg-note,
.msg-card > .msg-ask + .msg-note {
    margin-top: 0;
}

.msg-note > .bi {
    flex: none;
    margin-top: 1px;
    font-size: 1.05rem;
    color: #8a8983;
}

.msg-note b {
    display: block;
    font-weight: 600;
    color: #2c2c2a;
}

.msg-note.is-error {
    border-color: #eecccc;
    background: #fcf2f2;
    color: #a32d2d;
}

.msg-note.is-error > .bi {
    color: #a32d2d;
}

/* Psaní odpovědi: podbarvený box na konci konverzace (ve schránce stojí v patičce bez boxu). */
.msg-card .msg-composer {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid #e9e7e0;
    border-radius: 12px;
    background: #fafaf8;
}

.msg-card .msg-composer > label {
    margin-bottom: 8px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #8a8983;
}

.msg-card .msg-composer textarea {
    display: block;
    border-color: #dedcd4;
    border-radius: 10px;
    background: #fff;
}

.msg-card .msg-composer textarea:focus {
    outline: none;
    border-color: var(--theme-color);
    box-shadow: 0 0 0 3px var(--theme-tint, #eef6ec);
}

.msg-card .msg-composer-actions {
    margin-top: 10px;
}

.msg-card .msg-composer .input-hint {
    font-size: .76rem;
    color: #8a8983;
}

.res-page .msg-btn-sm {
    padding: 7px 14px;
    font-size: .84rem;
}

/* Popisek „Přidat obrázek“ je <label>: `.res-page label` by z něj udělal blok s okrajem. */
.res-page .msg-composer label.msg-attach-btn {
    display: inline-flex;
    margin: 0;
    font-weight: 500;
}

/* Čekající žádost o změnu — úkol pro obsluhu, proto nad konverzací a rovnou s tlačítky. */
.msg-ask {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #ecd9b4;
    border-radius: 14px;
    background: #fdf7ec;
}

.msg-ask-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.msg-ask-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #8a5a17;
    color: #fff;
    font-size: .95rem;
}

.msg-ask-head b {
    display: block;
    font-size: 1rem;
    color: #8a5a17;
}

.msg-ask-head small {
    display: block;
    font-size: .78rem;
    color: #6f6e6a;
}

.msg-ask > :not(.msg-ask-head) {
    padding-left: 44px;
}

.msg-req-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .84rem;
    font-weight: 600;
    color: #2c2c2a;
}

.msg-req-line .bi {
    color: #8a8983;
}

.msg-req-text {
    margin: 0;
    font-size: .88rem;
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.msg-req-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

/* Vyřízené žádosti v rozbalovací kartě .res-fold */
.msg-fold-count {
    flex: none;
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #f1f0ec;
    color: #5f5e5a;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
}

.msg-reqs {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ebe9e2;
    border-radius: 12px;
}

.msg-req {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border-top: 1px solid #f0efea;
}

.msg-req:first-child {
    border-top: 0;
}

.msg-req-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.msg-req-when {
    font-size: .78rem;
    color: #7a7974;
}

@media (max-width: 640px) {
    .msg-head-pill {
        padding: 3px 9px;
        font-size: .72rem;
    }

    .msg-card .msg-composer {
        padding: 12px;
    }

    /* Nápověda vedle „Přidat obrázek“ je jediný řádek, který telefon postrádat může. */
    .msg-card .msg-composer .input-hint {
        display: none;
    }

    .msg-card .msg-composer-actions {
        flex-wrap: nowrap;
    }

    .msg-card .msg-composer-actions > .res-btn.is-primary {
        flex: 1;
        justify-content: center;
    }

    .msg-ask > :not(.msg-ask-head) {
        padding-left: 0;
    }

    .msg-req-actions .res-btn {
        flex: 1;
        justify-content: center;
    }
}

/* --- Triage card + rejection dialog (rt-*, res-dialog) ---------------------
   The decision screen a reservation still awaiting an answer opens on. Global,
   like the rest of this file, because it shares .res-card / .res-btn / .res-pill
   with the editor it replaces — a scoped sheet could not reach those.          */

.res-result.is-warn {
    background: #fdf6e6;
    color: #8a6416;
    border-color: #f0e0bb;
}

/* --- Karta: stejná jako Přehled (.ov-card, .ov-top, .ov-ticket — viz konec souboru), jen pod
   letenkou štítky místo osy a sloupců. Barevné štítky nesou to, na čem rozhodnutí stojí
   (termín, nabídka, kdo je host), šedé jsou jen fakta. --- */
.rt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 28px;
    border-bottom: 1px solid #ecebe6;
}

.rt-tag {
    --rt-tag-bg: #f6f5f1;
    --rt-tag-line: #ecebe6;
    --rt-tag-fg: #4a4945;
    --rt-tag-icon: #8a8880;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 4px 11px;
    border: 1px solid var(--rt-tag-line);
    border-radius: 999px;
    background: var(--rt-tag-bg);
    color: var(--rt-tag-fg);
    font-size: .8rem;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.rt-tag .bi {
    flex: none;
    color: var(--rt-tag-icon);
}

.rt-tag.is-ok    { --rt-tag-bg: #eef6ec; --rt-tag-line: #cfe3c9; --rt-tag-fg: #3d6b33; --rt-tag-icon: #3d6b33; }
.rt-tag.is-info  { --rt-tag-bg: #eef3fd; --rt-tag-line: #d3e0f8; --rt-tag-fg: #1d4ed8; --rt-tag-icon: #1d4ed8; }
.rt-tag.is-warn  { --rt-tag-bg: #fdf3e3; --rt-tag-line: #ecd9b4; --rt-tag-fg: #8a5a17; --rt-tag-icon: #8a5a17; }
.rt-tag.is-error { --rt-tag-bg: #fceaea; --rt-tag-line: #eecccc; --rt-tag-fg: #a32d2d; --rt-tag-icon: #a32d2d; }
.rt-tag.is-muted { --rt-tag-bg: #fbfaf7; --rt-tag-line: #e6e4dc; --rt-tag-fg: #8a8880; --rt-tag-icon: #a3a29b; }

.rt-tag.is-accent {
    --rt-tag-bg: var(--theme-tint, #eef6ec);
    --rt-tag-line: color-mix(in srgb, var(--theme-color) 22%, #fff);
    --rt-tag-fg: var(--theme-strong, var(--theme-color));
    --rt-tag-icon: var(--theme-strong, var(--theme-color));
}

/* Kontakt jako odkaz: bílý s písmem v barvě objektu, aby se četl jako tlačítko, ne jako fakt. */
.rt-tag.is-link {
    --rt-tag-bg: #fff;
    --rt-tag-line: #e4e2db;
    --rt-tag-fg: var(--theme-strong, var(--theme-color));
    --rt-tag-icon: var(--theme-strong, var(--theme-color));
    font-weight: 600;
}

a.rt-tag:hover {
    filter: brightness(.97);
    color: var(--rt-tag-fg);
}

.rt-tag .rt-tag-go {
    font-size: .7rem;
    opacity: .8;
}

/* Na telefonu nesou kontakt tlačítka Zavolat / SMS / E-mail pod letenkou (.ov-contact). */
@media (max-width: 640px) {
    .rt-tag.is-contact {
        display: none;
    }
}

/* Oddíl karty pod štítky: kolize, přání hosta. */
.rt-sec {
    padding: 14px 28px;
    border-bottom: 1px solid #ecebe6;
}

.rt-sec .rt-conflicts {
    margin-top: 0;
}

/* Zobrazit vše / Zpět na dně karty. Pilulky, ne .res-btn — nic nerozhodují a nesmí soutěžit
   s potvrzením a zamítnutím v rozhodovacím boxu. Na telefonu půl na půl, na šířce vpravo. */
.rt-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 28px;
}

.res-page .rt-foot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    height: 38px;
    padding: 0 16px;
    border: 1px solid #e4e2db;
    border-radius: 999px;
    background: #fff;
    color: #4a4945;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s;
}

.res-page .rt-foot-btn.is-accent {
    color: var(--theme-strong, var(--theme-color));
}

.res-page .rt-foot-btn:hover {
    background: var(--theme-tint, #eef6ec);
}

@media (max-width: 560px) {
    .rt-tags,
    .rt-sec,
    .rt-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .rt-foot {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Kalkulace nové rezervace nemá Uložit (uloží ji odeslání nabídky): na telefonu zbývá
   Přepočítat přes celý řádek, i s popiskem. */
@media (max-width: 640px) {
    .pq-quote.is-offer .inv-toolbar-group:last-child {
        grid-template-columns: minmax(0, 1fr);
    }

    .pq-quote.is-offer .pq-label {
        display: inline;
    }
}

.pq-unsaved {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid #ecd9b4;
    border-radius: 999px;
    background: #fdf7ec;
    color: #8a5a17;
    font-size: .76rem;
    font-weight: 600;
}

/* --- The decision. A panel of its own, below the calculation and above nothing: the price
   is the last thing read before an offer goes out, so the buttons belong where the reading
   ends. Deliberately NOT sticky - a bar floating over the page follows the eye everywhere
   and only settles at the very bottom, which reads as a stray white rectangle.
   Bílý jako karta Přehledu nad ním; barvu nese jen částka a hlavní tlačítko. --- */
.rt-decision {
    display: flex;
    align-items: center;
    gap: 14px 20px;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding: 16px 22px;
    border: 1px solid #e4e2db;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px -26px rgba(0, 0, 0, .4);
}

.rt-decision-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 100%;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #eecccc;
    border-radius: 10px;
    background: #fceaea;
    color: #a32d2d;
    font-size: .85rem;
}

.rt-decision-error .bi {
    line-height: 1.45;
}

.rt-decision-price {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rt-decision-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #8a8880;
}

.rt-decision-total {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--theme-strong, var(--theme-color));
    font-variant-numeric: tabular-nums;
}

/* No calculation yet: a plain sentence, not a big brand-coloured zero. */
.rt-decision-total.is-missing {
    font-size: 1rem;
    font-weight: 600;
    color: #a3a29b;
}

.rt-decision-note {
    font-size: .8rem;
    color: #6f6e6a;
}

/* Rozepsaná cena se uloží s odesláním nabídky / po přijetí je potřeba nová nabídka. */
.rt-decision-hint {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 4px 0 0;
    font-size: .8rem;
    line-height: 1.4;
    color: #8a5a17;
}

.rt-decision-hint .bi {
    line-height: 1.4;
}

.rt-decision-actions {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.res-page .rt-decision .res-btn.is-primary {
    padding: 11px 22px;
}

/* Krátký popisek rozhodovacího tlačítka — jen na telefonu, viz níž. */
.rt-label-short {
    display: none;
}

/* Telefon: hlavní krok přes celou šířku nahoře, ostatní po dvou pod ním s krátkým popiskem
   („Poslat znovu“, „Potvrdit a poslat fakturu“) — dlouhé se na půl šířky lámaly do tří řádků. */
@media (max-width: 640px) {
    .rt-decision {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px;
    }

    .rt-decision-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-left: 0;
    }

    .res-page .rt-decision-actions .res-btn {
        justify-content: center;
        padding: 10px;
    }

    .res-page .rt-decision-actions .res-btn.is-primary {
        grid-column: 1 / -1;
        order: -1;
        padding: 12px 10px;
    }

    /* Jen Zamítnout a hlavní krok: zamítnutí pak přes celou šířku pod ním. */
    .rt-decision-actions .res-btn:first-child:nth-last-child(2) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .rt-label-long {
        display: none;
    }

    .rt-label-short {
        display: inline;
    }
}

.rt-conflicts {
    margin-top: 14px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
}

.rt-conflicts.is-error {
    background: #fceaea;
    border-color: #eecccc;
}

.rt-conflicts.is-warn {
    background: #fdf6e6;
    border-color: #f0e0bb;
}

.rt-conflicts-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: .85rem;
    font-weight: 600;
}

.rt-conflicts.is-error .rt-conflicts-head {
    color: #a32d2d;
}

.rt-conflicts.is-warn .rt-conflicts-head {
    color: #8a6416;
}

.rt-conflicts ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rt-conflicts li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .85rem;
    color: #2c2c2a;
}

.rt-conflicts a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Rejection dialog: an inline card, because HxMessageBox takes no input --- */
.res-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 1.25rem;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.res-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.res-dialog-head > .bi {
    margin-top: 3px;
    font-size: 1.2rem;
    color: #a32d2d;
}

.res-dialog-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.res-dialog-head p {
    margin: 2px 0 0;
    font-size: .86rem;
    color: #6f6e6a;
}

.res-dialog-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.res-dialog-label {
    font-size: .8rem;
    font-weight: 600;
    color: #4a4945;
}

.res-dialog-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: .88rem;
    color: #2c2c2a;
    cursor: pointer;
}

.res-dialog-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--theme-color);
}

.res-dialog-hint {
    margin: -8px 0 0;
    font-size: .8rem;
    color: #8a8880;
}

.res-dialog-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid #e6e4dc;
}

.rt-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rt-reason {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #e3e3e0;
    border-radius: 999px;
    background: #fff;
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.rt-reason:hover {
    border-color: #cfcdc4;
}

.rt-reason.is-active {
    border-color: var(--theme-strong, var(--theme-color));
    background: color-mix(in srgb, var(--theme-strong, var(--theme-color)) 8%, #fff);
}

.rt-reason input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--theme-color);
}

/* Phone: one row scrolling sideways, like the template's variants (.mt-variants). Wrapped, the
   five reasons took four ragged rows of the dialog. The row runs out to the dialog's edges and
   fades on the right; the 2px above and below keep the focus ring from being clipped. A reason
   picked at the faded edge is brought to the middle (revealActiveInRow). */
@media (max-width: 640px) {
    .rt-reasons {
        flex-wrap: nowrap;
        margin: -2px -22px;
        padding: 2px 2.5rem 2px 22px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    }

        .rt-reasons::-webkit-scrollbar {
            display: none;
        }

    .rt-reason {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* --- Overview tab (ov-*) ------------------------------------------------------
   The read-only first tab, in the language of the guest's status page: the stay
   as a ticket, the deal as a timeline, what waits on the operator beside it and
   the money at the bottom. Same colour rule as the guest's timeline
   (ReservationStatusSteps): only a done step carries the brand, only the current
   one amber; a step still ahead is neutral grey, never a light brand tint that
   would read as "done".
   Karta je bílá s neutrálním rámečkem jako ostatní záložky (.res-card.is-plain);
   barvu objektu nese plochou jen letenka termínu. */

.ov-card {
    margin-bottom: 1.25rem;
    overflow: hidden;
    border: 1px solid #e4e2db;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 32px -26px rgba(0, 0, 0, .4);
}

.ov-top {
    padding: 22px 28px 20px;
    background: #fff;
    border-bottom: 1px solid #efeee9;
}

/* Příjezd → noci → odjezd jako letenka: podbarvená barvou objektu, s výseky po stranách
   jako palubní vstupenka. Čára za pilulkou nocí leží ve výšce její osy, ne uprostřed
   sloupce — pod pilulkou je ještě popisek, kde je pobyt v čase. */
.ov-ticket {
    --ov-ticket-line: color-mix(in srgb, var(--theme-color) 18%, #fff);
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    border: 1px solid var(--ov-ticket-line);
    border-radius: 14px;
    background: var(--theme-tint, #eef6ec);
}

/* Výseky: bílý kroužek přes okraj, vidět je jen jeho vnitřní půlka. */
.ov-ticket::before,
.ov-ticket::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border: 1px solid var(--ov-ticket-line);
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
}

.ov-ticket::before {
    left: -10px;
    clip-path: inset(0 0 0 50%);
}

.ov-ticket::after {
    right: -10px;
    clip-path: inset(0 50% 0 0);
}

/* Zrušená a proběhlá rezervace barvu objektu nenese — stejné tóny jako stavový box (.ci-status). */
.ov-card.is-cancelled .ov-ticket {
    --ov-ticket-line: #eecccc;
    background: #fcf2f2;
}

.ov-card.is-completed .ov-ticket {
    --ov-ticket-line: #e4e2db;
    background: #f4f3ef;
}

.ov-end {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ov-end.is-out {
    align-items: flex-end;
    text-align: right;
}

.ov-end-label {
    font-size: .7rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a8880;
}

.ov-end-day {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: #2c2c2a;
}

.ov-end-sub {
    font-size: .82rem;
    color: #6f6e6a;
}

.ov-nights {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 190px;
}

.ov-nights::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    border-top: 2px dashed color-mix(in srgb, var(--theme-color) 40%, #ddd);
}

.ov-nights-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 13px;
    border: 1px solid color-mix(in srgb, var(--theme-color) 40%, #ddd);
    border-radius: 999px;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.4;
}

.ov-card.is-cancelled .ov-nights::before,
.ov-card.is-cancelled .ov-nights-pill {
    border-color: #ddd9cd;
}

.ov-card.is-cancelled .ov-nights-pill {
    color: #6f6e6a;
}

.ov-nights-caption {
    font-size: .78rem;
    color: #6f6e6a;
    white-space: nowrap;
}

/* Záhlaví karty nahrazuje hlavičku editoru, kterou editor nemá na žádné záložce.
   Kontakt hosta jen na telefonu: z mobilu se hostovi
   volá, kdežto na počítači stačí odkazy v sekci Host. */
.ov-who {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #e4e2db;
}

.ov-contact {
    display: none;
}

/* Tlačítka se nesmršťují pod svůj text (ikona a „Zavolat“ se na 320 px ořezávaly přes okraj
   pilulky) — když se tři nevejdou, poslední spadne na další řádek a roztáhne se. */
@media (max-width: 640px) {
    .ov-contact {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
    }
}

.ov-who-name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

.ov-who-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

/* Na šířce jméno vlevo a štítky vpravo jako dřív v hlavičce; když se nevejdou, spadnou pod jméno. */
@media (min-width: 641px) {
    .ov-who {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 16px;
    }

    .ov-who-name {
        font-size: 1.5rem;
    }

    .ov-who-pills {
        margin-top: 0;
    }
}

.ov-who-pills .res-pill {
    font-size: .78rem;
}

.ov-contact-btn {
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid color-mix(in srgb, var(--theme-strong, var(--theme-color)) 20%, #e3e3e0);
    border-radius: 999px;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ov-contact-btn .bi {
    font-size: .95rem;
}

.ov-contact-btn:hover {
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, var(--theme-color));
}

.ov-contact-btn.is-primary {
    border-color: transparent;
    background: var(--theme-color);
    color: #fff;
}

.ov-contact-btn.is-primary:hover {
    filter: brightness(.94);
    color: #fff;
}

.ov-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 28px;
    border-bottom: 1px solid #ecebe6;
}

.ov-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #f6f5f1;
    color: #4a4945;
    font-size: .8rem;
}

.ov-chip .bi {
    color: #8a8880;
}

.ov-chip.is-accent {
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, var(--theme-color));
}

.ov-chip.is-accent .bi {
    color: inherit;
}

.ov-body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.ov-col {
    padding: 22px 28px;
    min-width: 0;
}

.ov-col.is-side {
    border-left: 1px solid #efeee9;
    background: #fff;
}

.ov-h {
    margin: 0 0 14px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #6f6e6a;
}

.ov-h.is-spaced {
    margin-top: 22px;
}

/* Časová osa — stejná mechanika jako ReservationStatusSteps (spojnici kreslí položka,
   ne kolečko), navíc sloupec s datem vpravo. */
.ov-steps {
    --ov-gap: 14px;
    display: grid;
    gap: var(--ov-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ov-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
}

.ov-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 32px;
    bottom: calc(2px - var(--ov-gap));
    left: 14px;
    width: 2px;
    background: #e6e6df;
}

.ov-steps li.is-done:not(:last-child)::after {
    background: color-mix(in srgb, var(--theme-color) 45%, #e6e6df);
}

/* Řádek „Dnes“ je nižší než kolečko — jeho úsek spojnice musí začít hned nahoře. */
.ov-steps li.ov-today-row::after {
    top: 0;
}

.ov-step-ico {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef0ee;
    color: #6f6e6a;
    font-size: .85rem;
}

.ov-steps li.is-done .ov-step-ico {
    background: var(--theme-color);
    color: #fff;
}

.ov-steps li.is-current .ov-step-ico {
    background: #c9821f;
    color: #fff;
    box-shadow: 0 0 0 5px #fbf1e0;
}

.ov-steps li.is-failure .ov-step-ico {
    background: #a32d2d;
    color: #fff;
}

.ov-step-txt strong {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    color: #2c2c2a;
}

.ov-steps li.is-upcoming .ov-step-txt strong {
    color: #6f6e6a;
}

.ov-steps li.is-failure .ov-step-txt strong {
    color: #a32d2d;
}

.ov-step-txt span {
    display: block;
    font-size: .8rem;
    line-height: 1.45;
    color: #6f6e6a;
    overflow-wrap: anywhere;
}

.ov-step-when {
    padding-top: 2px;
    font-size: .78rem;
    color: #6f6e6a;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ov-steps li.is-current .ov-step-when {
    color: #8a5a17;
    font-weight: 600;
}

.ov-step-when:empty {
    display: none;
}

.ov-steps li.ov-today-row {
    grid-template-columns: 30px minmax(0, 1fr);
}

.ov-today {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #c9821f;
}

.ov-today::after {
    content: "";
    flex: 1;
    border-top: 1px dashed #e3c591;
}

/* „Na řadě“ — co čeká na obsluhu. Jantarová = udělat, červená = už je pozdě; tóny jako
   stavový box Check-inu (.ci-status is-warn / is-error): text neutrální, barvu nese ikona a odkaz. */
.ov-attn {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ov-attn-item {
    --ov-attn-fg: #8a5a17;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid #ecd9b4;
    border-radius: 10px;
    background: #fdf7ec;
    color: #4a4945;
    font-size: .84rem;
    line-height: 1.45;
}

.ov-attn-item > .bi {
    margin-top: 1px;
    color: var(--ov-attn-fg);
    font-size: .95rem;
}

.ov-attn-item.is-danger {
    --ov-attn-fg: #a32d2d;
    border-color: #eecccc;
    background: #fcf2f2;
}

.ov-attn-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ov-attn-fg);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ov-attn-link .bi {
    font-size: .75rem;
}

.ov-calm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: .84rem;
    color: #6f6e6a;
}

.ov-calm .bi {
    color: var(--theme-strong, var(--theme-color));
}

/* Host jako vizitka: hlavička říká, kdo to je (nový / vracející se), a celá vede na profil;
   pod ní kontakt a účet v řádcích s ikonou místo sloupce popisků, který na telefonu bral
   půlku šířky a lámal e-mail uprostřed slova. Bez profilu (host bez kontaktu) zbudou jen řádky. */
.ov-guest-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--theme-strong, var(--theme-color)) 18%, #e3e3e0);
    border-radius: 14px 14px 0 0;
    background: #fff;
    color: #2c2c2a;
    text-decoration: none;
    transition: background-color .15s;
}

.ov-guest-card:hover,
.ov-guest-card:focus-visible {
    background: var(--theme-tint, #eef6ec);
    color: #2c2c2a;
}

.ov-guest-avatar {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--theme-tint, #eef6ec);
    color: var(--theme-strong, var(--theme-color));
    font-size: 1.05rem;
    font-weight: 700;
}

.ov-guest-card.is-new .ov-guest-avatar {
    background: #f1f0ec;
    color: #6f6e6a;
}

.ov-guest-who {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.ov-guest-who strong {
    font-size: .95rem;
    line-height: 1.3;
}

.ov-guest-who small {
    font-size: .78rem;
    line-height: 1.35;
    color: #6f6e6a;
}

.ov-guest-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .76rem;
    font-weight: 600;
    color: var(--theme-strong, var(--theme-color));
    white-space: nowrap;
}

.ov-guest-go .bi {
    font-size: .65rem;
}

.ov-guest-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid color-mix(in srgb, var(--theme-strong, var(--theme-color)) 18%, #e3e3e0);
    border-radius: 14px;
    background: #fbfaf7;
}

.ov-guest-card + .ov-guest-rows {
    border-top: 0;
    border-radius: 0 0 14px 14px;
}

.ov-guest-rows li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding: 9px 14px;
    font-size: .86rem;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

.ov-guest-rows li + li {
    border-top: 1px solid #efeee9;
}

.ov-guest-rows li > .bi {
    font-size: .9rem;
    color: #8a8880;
}

.ov-guest-rows a {
    font-weight: 600;
    color: var(--theme-strong, var(--theme-color));
    text-decoration: none;
}

.ov-guest-rows a:hover {
    text-decoration: underline;
}

.ov-guest-rows li.is-danger,
.ov-guest-rows li.is-danger > .bi {
    color: #a32d2d;
}

.ov-guest-rows .ov-channel-code {
    margin-left: .4rem;
    font-size: .78rem;
    color: #8a8880;
    letter-spacing: .02em;
}

/* Na nejužších telefonech jen ikona odkazu, ať se „Vracející se host“ nezalomí. */
@media (max-width: 359.98px) {
    .ov-guest-go > span {
        display: none;
    }

    .ov-guest-go .bi {
        font-size: .8rem;
    }
}

.ov-missing {
    font-weight: 400;
    color: #a3a29b;
}

.ov-note {
    margin: 0;
    padding: 10px 12px;
    border-left: 3px solid var(--theme-color);
    border-radius: 4px 10px 10px 4px;
    background: var(--theme-tint, #eef6ec);
    font-size: .84rem;
    line-height: 1.5;
    color: #2c2c2a;
    white-space: pre-line;
}

.ov-note + .ov-note {
    margin-top: 8px;
}

/* Interní poznámka stejným šrafováním jako poznámka v konverzaci — nesmí se splést
   s něčím, co host vidí. */
.ov-note.is-internal {
    border-left-color: #c9a646;
    background: repeating-linear-gradient(45deg, #fdfbf3, #fdfbf3 10px, #faf6e8 10px, #faf6e8 20px);
}

.ov-note-label {
    display: block;
    margin-bottom: 2px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a8880;
    white-space: normal;
}

/* Čtyři čísla dole. Každé je tlačítko na záložku, kde se s ním pracuje. */
.ov-foot {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid #ecebe6;
    background: #fbfaf7;
}

.ov-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding: 14px 16px;
    border: 0;
    background: transparent;
    color: #2c2c2a;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s;
}

.ov-stat + .ov-stat {
    border-left: 1px solid #ecebe6;
}

.ov-stat:hover {
    background: color-mix(in srgb, var(--theme-strong, var(--theme-color)) 6%, #fff);
}

.ov-stat-label {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8a8880;
}

.ov-stat strong {
    font-size: 1.12rem;
    font-weight: 700;
    color: #2c2c2a;
    font-variant-numeric: tabular-nums;
}

.ov-stat.is-paid strong {
    color: var(--theme-strong, var(--theme-color));
}

.ov-stat.is-due strong,
.ov-stat small.is-due {
    color: #8a5a17;
}

.ov-stat small {
    font-size: .75rem;
    font-weight: 400;
}

@media (max-width: 860px) {
    .ov-body {
        grid-template-columns: 1fr;
    }

    .ov-col.is-side {
        border-left: 0;
        border-top: 1px solid #ecebe6;
    }

    .ov-foot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ov-stat:nth-child(3) {
        border-left: 0;
    }

    .ov-stat:nth-child(n+3) {
        border-top: 1px solid #ecebe6;
    }
}

@media (max-width: 560px) {
    .ov-top,
    .ov-chips,
    .ov-col {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ov-ticket {
        grid-template-columns: 1fr 1fr;
        padding: 14px 16px;
    }

    .ov-nights {
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
    }

    .ov-end-day {
        font-size: 1.15rem;
    }

    .ov-steps li {
        grid-template-columns: 30px minmax(0, 1fr);
        row-gap: 2px;
    }

    /* Datum pod text kroku — vedle by ho zúžený sloupec zalomil uprostřed. */
    .ov-step-when {
        grid-column: 2;
        padding-top: 0;
        text-align: left;
    }
}

/* --- Nová rezervace v administraci (rc-*) ---
   ReservationForm ve vzhledu editoru (ReservationFormPreset.UseEditorLayout): bílé karty jako
   záložky editoru, nadpis v první kartě se šipkou zpět, domy jako dlaždice, termín v rámečku
   (rv-range), děti jako seznam s věkem −/+ a souhrn chyb u tlačítka. Formulář nepotřebuje šířku
   editoru, proto užší sloupec. */
.res-page.rc-page {
    max-width: 780px;
}

.rc-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #2c2c2a;
}

/* Šipka zpět místo ikony v hlavičce první karty — stejně velká jako ikona ostatních karet. */
.rc-back {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #d3d1c7;
    border-radius: 9px;
    background: #fff;
    color: #5f5e5a;
    text-decoration: none;
}

.rc-back:hover {
    background: #f7f6f2;
    color: #2c2c2a;
}

.rc-back:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}

.rc-label {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    color: #6f6e6a;
}

/* Domy jako dlaždice; barvu nese data-theme na každé dlaždici (BrandThemeCssBuilder). */
.rc-houses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.rc-house {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #d3d1c7;
    border-radius: 10px;
    background: #fff;
    color: #4a4945;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
}

.rc-house:hover {
    background: #faf9f6;
}

.rc-house:focus-visible {
    outline: 2px solid var(--theme-color);
    outline-offset: 2px;
}

.rc-house.is-active {
    border-color: var(--theme-color);
    box-shadow: inset 0 0 0 1px var(--theme-color);
    background: color-mix(in srgb, var(--theme-color) 7%, #fff);
    color: #2c2c2a;
    font-weight: 600;
}

.rc-house-dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--theme-color);
}

.rc-house-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.rc-house-text small {
    font-size: .74rem;
    font-weight: 400;
    color: #8a8983;
    white-space: nowrap;
}

.rc-house-check {
    margin-left: auto;
    color: var(--theme-color);
}

.rc-house:not(.is-active) .rc-house-check {
    display: none;
}

.rc-houses + .rc-range {
    margin-top: 16px;
}

.rc-offer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 8px 12px;
    border-radius: 9px;
    background: var(--theme-tint);
    color: var(--theme-strong, var(--theme-color));
    font-size: .83rem;
}

/* Kontakt po dvojicích; na telefonu e-mail a telefon přes celou šířku. */
.res-grid.rc-contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .res-grid.rc-contact > :nth-child(n + 3) {
        grid-column: 1 / -1;
    }
}

/* Úzký telefon. */
@media (max-width: 400px) {
    /* Vybraný dům pozná obsluha podle rámečku; fajfka by na úzké dlaždici zalomila text. */
    .rc-house {
        padding: 9px 10px;
    }

    .rc-house-check {
        display: none;
    }
}

/* Neplatná pole (Blazor dává inputu třídu .invalid) — editor je jinak nezvýrazňuje. */
.rc-page .form-control.invalid,
.rc-page input.invalid {
    border-color: #d98c8c;
}

/* Sbalené přání hosta: jeho začátek na jednom řádku. */
.rc-page .res-fold-sum {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: .82rem;
    color: #6f6e6a;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Souhrn chyb u tlačítka — tóny .ci-status.is-error. Položky jsou tlačítka, která přenesou fokus
   na pole; opakované odeslání souhrn krátce zvýrazní (is-pulse z focusErrorSummary). */
.rc-errors {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid #eecccc;
    border-radius: 12px;
    background: #fcf2f2;
    color: #a32d2d;
    font-size: .85rem;
    line-height: 1.45;
    scroll-margin: 90px;
}

.rc-errors:focus {
    outline: 2px solid #a32d2d;
    outline-offset: 2px;
}

.rc-errors-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
}

.rc-errors-head b {
    font-size: .92rem;
}

.rc-errors-head span {
    flex-basis: 100%;
    font-size: .78rem;
    color: #b45a5a;
}

.rc-errors ul {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.rc-errors-link,
.rc-errors-text {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #f1dada;
    border-radius: 7px;
    background: #fff;
    color: #7f2323;
    font: inherit;
    text-align: left;
}

.rc-errors-link {
    cursor: pointer;
}

.rc-errors-link:hover {
    border-color: #e2b5b5;
}

.rc-errors-link b {
    color: #a32d2d;
}

.rc-errors.is-pulse {
    animation: rc-errors-pulse .9s ease-out 1;
}

@keyframes rc-errors-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(163, 45, 45, .45);
    }

    100% {
        box-shadow: 0 0 0 12px rgba(163, 45, 45, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rc-errors.is-pulse {
        animation: none;
    }
}

/* Zrušit + Vytvořit vpravo jako akce Check-inu; na telefonu přes celou šířku, hlavní nahoře. */
.rc-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 640px) {
    .rc-actions {
        flex-direction: column-reverse;
    }

    .rc-actions .res-btn {
        justify-content: center;
    }
}

/* --- Rezervační formulář: výprava, shrnutí a veřejný nádech (rc-*) ---
   Host i administrace mají výpravu jako řádky s −/+ (GuestCountRow) a věk dětí ze seznamu.
   Host navíc nadpis webu nad kartami (.rc-page-head), kartu Shrnutí a tlačítko-pilulku. */

/* Globální `form` je flex s gap 20px: sčítal by se s margin-bottom karet (40 px místo 20). */
.rc-form {
    gap: 0;
}

/* Host vyplňuje jen jeden sloupec polí: na 780 px admin sloupce ležely −/+ výpravy daleko od
   popisků a karty působily prázdně. */
.res-page.rc-page.rc-public {
    max-width: 640px;
}

.rc-page-head.section-head {
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .rc-page-head.section-head {
        margin-bottom: 2rem;
    }
}

/* Výprava: popisek s věkovou hranicí vlevo, kulaté −/+ vpravo, řádky oddělené linkou. */
.rc-counts {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rc-count-row {
    padding: 12px 0;
    border-top: 1px solid #f0efeb;
}

.rc-count-row:first-child {
    padding-top: 0;
    border-top: 0;
}

.rc-count-row:last-child {
    padding-bottom: 0;
}

.rc-count-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rc-count-text {
    flex: 1;
    min-width: 0;
    display: grid;
    line-height: 1.3;
}

.rc-count-text b {
    font-size: .95rem;
    font-weight: 700;
    color: #2c2c2a;
}

.rc-count-text small {
    font-size: .78rem;
    color: #8a8983;
}

.rc-count {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border-radius: 999px;
}

/* Fokus sem přenáší jen položka souhrnu chyb (tabindex=-1). */
.rc-count:focus {
    outline: 2px solid var(--theme-strong, var(--theme-color));
    outline-offset: 3px;
}

.rc-count button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #cfccc2;
    border-radius: 50%;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    font-size: .95rem;
    cursor: pointer;
}

.rc-count button:hover:not(:disabled) {
    border-color: var(--theme-color);
    background: var(--theme-tint);
}

.rc-count button:focus-visible {
    outline: 2px solid var(--theme-strong, var(--theme-color));
    outline-offset: 2px;
}

.rc-count button:disabled {
    border-color: #e7e5de;
    color: #c4c2ba;
    cursor: default;
}

.rc-count output {
    min-width: 2.1em;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rc-count-row > .validation-message {
    margin-top: 6px;
}

/* Věky dětí pod řádkem Děti: na telefonu po dvou, od 700 px po čtyřech. */
.rc-ages {
    margin-top: 10px;
}

.rc-ages-label {
    display: block;
    margin-bottom: 6px;
    font-size: .78rem;
    font-weight: 600;
    color: #5f5e5a;
}

.rc-age-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
}

@media (min-width: 700px) {
    .rc-age-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Váhu nese .res-page — jinak vyhraje obecné `.res-page label` (blok s okrajem). */
.res-page label.rc-age-field {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: .75rem;
    color: #6f6e6a;
}

.res-page label.rc-age-field.is-invalid {
    color: #a32d2d;
}

.res-page select.rc-age-select {
    width: 100%;
    height: 40px;
    padding: 0 30px 0 12px;
    border: 1px solid #d3d1c7;
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236f6e6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E") no-repeat right 10px center / 13px;
    color: #2c2c2a;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.res-page select.rc-age-select:hover {
    border-color: #b9b6ab;
}

.res-page select.rc-age-select:focus {
    outline: none;
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 3px var(--theme-tint);
}

.res-page select.rc-age-select.is-empty {
    color: #8a8983;
    font-weight: 400;
}

.res-page select.rc-age-select.invalid {
    border-color: #d98c8c;
    color: #a32d2d;
}

.rc-ages > .validation-message {
    margin-top: 6px;
}

/* Shrnutí (host): orientační cena v tónu objektu, rozpis na požádání. */
.rc-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--theme-tint);
}

.rc-total-label {
    font-size: .88rem;
    color: var(--theme-strong, var(--theme-color));
}

.rc-total-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2c2c2a;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rc-breakdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 0;
    border: 0;
    background: none;
    font-size: .82rem;
    color: #6f6e6a;
    cursor: pointer;
}

.rc-breakdown-toggle:hover {
    color: var(--theme-strong, var(--theme-color));
}

.rc-breakdown-toggle .bi {
    display: inline-block;
    font-size: .75rem;
    transition: transform .15s;
}

.rc-breakdown-toggle[aria-expanded="true"] .bi {
    transform: rotate(90deg);
}

.rc-lines {
    width: 100%;
    margin-top: 4px;
    border-collapse: collapse;
    font-size: .85rem;
}

.rc-lines td {
    padding: 6px 0;
    border-top: 1px solid #f0efeb;
    vertical-align: top;
}

.rc-lines td:last-child {
    padding-left: 12px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rc-estimate-note {
    margin: 8px 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: #8a8983;
}

.rc-estimate-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px dashed #d8d6cd;
    border-radius: 12px;
    background: #faf9f6;
    font-size: .86rem;
    color: #6f6e6a;
}

.rc-estimate-empty .bi {
    color: #a3a29b;
}

/* Potvrzení zásad pod cenou, oddělené linkou; bez ceny hned pod hlavičkou karty. */
.rc-consent {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #efeee9;
}

.rc-summary > .res-card-head + .rc-consent {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* `.res-page label` (0,1,1) by z řádku přepínače udělal blok s malým šedým písmem. */
.res-page label.input-toggle-container {
    display: flex;
    margin: 0;
    font-size: inherit;
    color: inherit;
}

.rc-terms {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    font-size: .8rem;
    line-height: 1.5;
    color: #6f6e6a;
}

.rc-terms .bi {
    flex: none;
    margin-top: 2px;
    color: #a3a29b;
}

.rc-terms a {
    color: var(--theme-strong, var(--theme-color));
    font-weight: 600;
}

/* Tlačítko-pilulka webu vpravo; na telefonu přes celou šířku. */
.rc-actions .page-btn {
    min-width: 0;
}

@media (max-width: 640px) {
    .rc-actions .page-btn {
        width: 100%;
        padding-inline: 1rem;
        white-space: normal;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------------
   Vyúčtování storna (Finance, varianta A z harnessu storno-card).
   Výpočet jako účtenka: řádky, mezisoučet „storno poplatek“ a výsledek dole
   v tónu toho, co se stane (vrátit = zelená, dluží = červená, nic = šedá).
   Den zrušení a účet jako pole, „kolik vrátit“ jako radio karty .inv-pay-choice.
   --------------------------------------------------------------------------- */
.sc-receipt {
    --sc-tint: #f2f8f0;
    --sc-fg: #3d6b33;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border: 1px solid #e6e4dc;
    border-radius: 10px;
    background: #fff;
}

.sc-receipt.is-owed { --sc-tint: #fcf2f2; --sc-fg: #a32d2d; }
.sc-receipt.is-none { --sc-tint: #f6f6f3; --sc-fg: #2c2c2a; }

.sc-receipt li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    font-size: .88rem;
    color: #2c2c2a;
}

.sc-receipt li + li {
    border-top: 1px solid #f0efeb;
}

.sc-receipt li > span:first-child {
    color: #6f6e6a;
}

.sc-receipt li small {
    display: block;
    font-size: .75rem;
    color: #8f8e87;
}

.sc-receipt li b {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sc-receipt li.is-sum {
    background: #fbfaf7;
    font-weight: 600;
}

.sc-receipt li.is-sum > span:first-child {
    color: #2c2c2a;
}

.sc-receipt li.is-result {
    padding: 12px 14px;
    border-radius: 0 0 10px 10px;
    background: var(--sc-tint);
}

.sc-receipt li.is-result > span:first-child {
    align-self: center;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sc-fg);
}

.sc-receipt li.is-result b {
    font-size: 1.25rem;
    color: var(--sc-fg);
}

.res-page .sc-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 14px 0 0;
}

.res-page .sc-fields .input-container {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    background: transparent;
}

.res-page .sc-fields label {
    margin: 0;
    font-size: .8rem;
    color: #6f6e6a;
}

.res-page .sc-fields input {
    width: 100%;
    padding: 8px 11px;
    font: inherit;
    font-size: .9rem;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    background: #fff;
}

.res-page .sc-fields small {
    font-size: .75rem;
    color: #8f8e87;
}

.sc-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    font-size: .82rem;
    line-height: 1.45;
    color: #6f6e6a;
}

.sc-note .bi {
    margin-top: 2px;
}

.sc-choices-label {
    margin: 14px 0 6px;
    font-size: .8rem;
    color: #6f6e6a;
}

.sc-choices {
    display: grid;
    gap: 6px;
}

.res-page .sc-amount-input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.res-page .sc-amount-input input {
    width: 120px;
    padding: 6px 10px;
    font: inherit;
    font-size: .88rem;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
}

/* Doklady, které vyúčtování vystavilo: dobropisy a faktura za storno poplatek. */
.sc-docs {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.sc-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid #e6e4dc;
    border-radius: 10px;
    background: #fff;
}

.sc-doc-icon {
    flex: none;
    color: var(--theme-strong, var(--theme-color));
}

.sc-doc-main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.sc-doc-title {
    font-size: .9rem;
    font-weight: 600;
    color: #2c2c2a;
}

.sc-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: .8rem;
    color: #8a5a17;
}

.sc-doc-meta b {
    color: #2c2c2a;
    font-variant-numeric: tabular-nums;
}

.sc-doc-meta .is-done {
    color: #3d6b33;
}

.sc-doc-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Tisk a PDF jako u faktur, jen vysoké jako tlačítka vedle. */
.sc-doc-actions .pe-icon-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

@media (max-width: 560px) {
    .res-page .sc-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-doc {
        flex-wrap: wrap;
    }

    .sc-doc-actions {
        width: 100%;
    }
}

/* wwwroot/styles/Pages/Components/checkIn.css */
/* Online check-in - same "minimal canvas" treatment as the reservation edit and
   Ubyport administration screens: no brand-coloured panel, white cards on the page
   background, brand accent only via the shared theme tokens (--theme-color /
   -strong / -tint). The tokens are activated by data-theme="<slug>" on
   .checkin-page, which supplies the values WITHOUT painting a brand-coloured
   background (see variables.css / BrandThemeCssBuilder).

   Shared by the public CheckInCreate form and the admin CheckInEdit form. */

.checkin-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    text-align: left;
    color: #2c2c2a;
}

/* --- Page header --- */
.checkin-head {
    margin: .5rem 0 1.75rem;
}

.checkin-eyebrow {
    display: block;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a3a29b;
}

.checkin-title {
    margin: 4px 0 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
    color: #2c2c2a;
}

.checkin-intro {
    margin: 8px 0 0;
    max-width: 52ch;
    font-size: .92rem;
    line-height: 1.55;
    color: #6f6e6a;
}

/* --- Guest card --- */
.checkin-card {
    background: #fff;
    border: 1px solid #e3e3e0;
    border-radius: 14px;
    padding: 18px 20px 22px;
    margin-bottom: 1.25rem;
}

.checkin-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #f0efeb;
}

.checkin-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: .95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.checkin-card-title {
    flex: 1;
    min-width: 0;
}

.checkin-card-title h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2c2c2a;
    line-height: 1.4;
}

.checkin-card-title p {
    margin: 2px 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: #6f6e6a;
}

.checkin-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #eecccc;
    border-radius: 8px;
    background: #fff;
    color: #a32d2d;
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.checkin-remove:hover {
    background: #fceaea;
}

/* Main-guest info note inside the card */
.checkin-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 18px;
    padding: 10px 14px;
    border: 1px solid var(--theme-tint, #d3e0f8);
    border-radius: 10px;
    background: var(--theme-tint, #f4f7fd);
    color: var(--theme-strong, #1d4ed8);
    font-size: .82rem;
    line-height: 1.5;
}

.checkin-note .bi {
    margin-top: 1px;
    flex-shrink: 0;
}

/* --- Field grid - neutralises the global rounded-white .input-container --- */
.checkin-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
    align-items: start;
}

/* Full-width row (nationality category selector, address line) */
.checkin-field-full {
    grid-column: 1 / -1;
}

.checkin-page .input-container {
    background: transparent;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.checkin-page label {
    display: block;
    text-align: left;
    font-size: .8rem;
    font-weight: 400;
    color: #6f6e6a;
    margin-bottom: 4px;
}

.checkin-page input,
.checkin-page textarea,
.checkin-page .form-control,
.checkin-page .form-select {
    width: 100%;
    padding: 8px 11px;
    font-size: .9rem;
    color: #2c2c2a;
    background: #fff;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    box-shadow: none;
    outline: none;
}

.checkin-page textarea {
    min-height: 90px;
    resize: vertical;
}

.checkin-page input:focus,
.checkin-page textarea:focus,
.checkin-page .form-control:focus,
.checkin-page .form-select:focus {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

.checkin-page .input-hint {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: #a3a29b;
}

.checkin-page .validation-message,
.checkin-page .field-validation-error {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: #a32d2d;
    background: none;
    padding: 0;
}

/* HxInputDate wraps its input in .hx-form-group - strip the duplicated chrome so
   the date field matches the plain inputs next to it. */
.checkin-page .hx-form-group {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    font-size: inherit;
}

/* HxInputDate renders its calendar popup inside .input-container, so the broad
   field styling above leaks into the calendar's month/year <select>s. Restore the
   calendar's own compact, borderless look (mirrors reservationEdit.css). */
.checkin-page .hx-calendar .form-select {
    width: auto;
    padding: 4px 28px 4px 8px;
    border-color: transparent;
    border-radius: 10px;
    background-color: transparent;
    /* The broad field rule above uses the `background` shorthand, which resets
       repeat/position to their initials - restore them so the chevron shows once
       instead of tiling into a zigzag. */
    background-repeat: no-repeat;
    background-position: right 8px center;
    box-shadow: none;
}

.checkin-page .hx-calendar .form-select:hover {
    background-color: #f4f2ec;
}

.checkin-page .hx-calendar .form-select:focus {
    border-color: var(--theme-strong, var(--theme-color));
    background-color: #fff;
    box-shadow: none;
}

/* --- Add-guest button (ghost) --- */
.checkin-page .checkin-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 1.5rem;
    padding: 11px;
    border: 1px dashed #cfccc0;
    border-radius: 10px;
    background: #fbfaf7;
    color: #5f5e5a;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}

.checkin-page .checkin-add:hover {
    border-color: var(--theme-strong, var(--theme-color));
    color: var(--theme-strong, var(--theme-color));
    background: var(--theme-tint, #f1f5ee);
}

/* --- Saved companions (signed-in guest only, CheckInCreate) ---
   A quiet panel under the add-guest button: one row per companion, one click adds a
   prefilled card; a companion already on the form shows a check instead. */
.checkin-page .checkin-add-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 1.5rem;
}

.checkin-page .checkin-add-row .checkin-add {
    margin: 0;
}

.checkin-saved {
    padding: 12px 16px 4px;
    border: 1px solid #eceae2;
    border-radius: 12px;
    background: #fbfaf7;
}

.checkin-page .checkin-saved-title {
    margin: 0 0 6px;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.4;
    color: #2c2c2a;
}

.checkin-saved-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.checkin-saved-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid #f0efeb;
}

.checkin-saved-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: .8rem;
    font-weight: 600;
}

.checkin-saved-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.checkin-saved-copy strong {
    font-size: .9rem;
    font-weight: 500;
    color: #2c2c2a;
    overflow-wrap: anywhere;
}

.checkin-saved-copy span {
    font-size: .78rem;
    color: #6f6e6a;
}

.checkin-page .checkin-saved-add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    background: #fff;
    color: var(--theme-strong, var(--theme-color));
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.checkin-page .checkin-saved-add:hover {
    border-color: var(--theme-strong, var(--theme-color));
    background: var(--theme-tint, #f1f5ee);
}

.checkin-saved-state {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    font-size: .82rem;
    color: #a3a29b;
}

.checkin-saved-state .bi {
    color: var(--theme-strong, var(--theme-color));
}

/* --- Privacy notice --- */
.checkin-privacy {
    margin: 0 0 1.5rem;
    padding: 14px 16px;
    border: 1px solid #eceae2;
    border-radius: 12px;
    background: #fbfaf7;
    font-size: .8rem;
    line-height: 1.55;
    color: #6f6e6a;
}

.checkin-privacy p {
    margin: 0 0 .5rem;
}

.checkin-privacy p:last-child {
    margin-bottom: 0;
}

.checkin-privacy a {
    color: var(--theme-strong, var(--theme-color));
}

/* --- Submit refusal ---
   Shown when the link died while the guest was typing (expired token, cancelled stay). */
.checkin-page .checkin-submit-error {
    margin: 0 0 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fdecea;
    color: #92322c;
    border: 1px solid #f5c6c1;
    font-size: 0.95rem;
}

/* --- Submit / action bar ---
   Scoped under .checkin-page so it out-specifies any global .btn chrome. */
.checkin-page .checkin-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.checkin-page .checkin-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 28px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: filter .15s;
}

.checkin-page .checkin-submit:hover:not(:disabled) {
    filter: brightness(.9);
    color: #fff;
}

.checkin-page .checkin-submit:disabled {
    opacity: .6;
    cursor: progress;
}

.checkin-page .checkin-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    background: #fff;
    color: #5f5e5a;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.checkin-page .checkin-ghost:hover {
    background: #f7f6f2;
    color: #2c2c2a;
}

/* --- Top-level validation summary --- */
.checkin-page .validation-errors {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 12px 16px;
    border: 1px solid #eecccc;
    border-radius: 10px;
    background: #fceaea;
    color: #a32d2d;
    font-size: .83rem;
}

.checkin-page .validation-errors:empty {
    display: none;
}

.checkin-page .validation-errors li {
    padding: 2px 0;
    list-style: none;
    color: #a32d2d;
}

@media (max-width: 640px) {
    .checkin-card {
        padding: 16px 15px 18px;
    }

    .checkin-page .checkin-actions {
        justify-content: stretch;
    }

    .checkin-page .checkin-submit {
        flex: 1 1 100%;
    }
}

/* wwwroot/styles/Pages/Components/publicForm.css */
/* Public forms (reservation request, contact us) - the same "minimal canvas"
   treatment as the reservation edit, check-in and Ubyport screens: no brand-coloured
   panel, white cards on the page background, brand accent only via the shared theme
   tokens (--theme-color / -strong / -tint). The tokens are activated by
   data-theme="<slug>" on .pf-page, which supplies the values WITHOUT painting a
   brand-coloured background (see variables.css / BrandThemeCssBuilder).

   Shared by ReservationForm and ContactUsForm; the old rounded .form panel in
   Styles/Pages/Components/forms.css stays for the account screens. */

.pf-page {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    text-align: left;
    color: #2c2c2a;
}

/* --- The form „bubble" ---
   Every section lives inside one rounded shell so the form reads as a single
   unit instead of a stack of separate cards. The brand tint lights it from the
   top and bottom edges, the same treatment as the reservation status card
   (ReservationStatusScreen.razor.css). */
.pf-shell {
    background: #fff;
    /* Neutral hairline (as on .status-card) - the tint alone is too pale to draw
       the edge against the white page, so colour comes from the gradients below. */
    border: 1px solid #e6e6df;
    border-radius: 22px;
    box-shadow: 0 18px 50px -24px rgba(20, 60, 20, .45);
    overflow: hidden;
}

/* --- Header - the tinted top of the bubble --- */
.pf-head {
    padding: 26px 24px 22px;
    background: linear-gradient(180deg, var(--theme-tint, #f1f5ee) 0%, #fff 100%);
    border-bottom: 1px solid #efeee9;
}

.pf-eyebrow {
    display: block;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a3a29b;
}

.pf-title {
    margin: 4px 0 0;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
    color: #2c2c2a;
}

.pf-intro {
    margin: 8px 0 0;
    max-width: 52ch;
    font-size: .92rem;
    line-height: 1.55;
    color: #6f6e6a;
}

/* --- Sections - segments of the bubble, split by a hairline instead of by
   their own frame --- */
.pf-card {
    padding: 20px 24px 24px;
}

.pf-card + .pf-card {
    border-top: 1px solid #f0efeb;
}

.pf-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.pf-card-head > .bi {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color));
    font-size: 1rem;
}

.pf-card-head h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #2c2c2a;
    line-height: 1.4;
}

.pf-card-head p {
    margin: 2px 0 0;
    font-size: .82rem;
    line-height: 1.5;
    color: #6f6e6a;
}

/* --- Field grid - neutralises the global rounded-white .input-container --- */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px 16px;
    align-items: start;
}

/* Narrow numeric fields (adults / children / infants / pets) share one auto-fit row;
   the number in the class names the intent, the track sizing does the wrapping. */
.pf-grid-3,
.pf-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* A follow-up grid inside the same section (children's ages under the guest counts)
   keeps the row gap of the grid it continues. */
.pf-grid + .pf-grid {
    margin-top: 14px;
}

.pf-span-2 {
    grid-column: 1 / -1;
}

.pf-page .input-container {
    background: transparent;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* :not() keeps the rule off the privacy toggle, whose <label> is the flex row
   carrying the switch and its text (InputToggleBox.razor.css). */
.pf-page label:not(.input-toggle-container) {
    display: block;
    text-align: left;
    font-size: .8rem;
    font-weight: 400;
    color: #6f6e6a;
    margin-bottom: 4px;
}

.pf-page input,
.pf-page textarea,
.pf-page .form-control,
.pf-page .form-select {
    width: 100%;
    padding: 8px 11px;
    font-size: .9rem;
    color: #2c2c2a;
    background: #fff;
    border: 1px solid #d3d1c7;
    border-radius: 8px;
    box-shadow: none;
    outline: none;
}

.pf-page textarea {
    min-height: 110px;
    resize: vertical;
}

.pf-page input:focus,
.pf-page textarea:focus,
.pf-page .form-control:focus,
.pf-page .form-select:focus {
    border-color: var(--theme-strong, var(--theme-color));
    box-shadow: 0 0 0 2px var(--theme-tint, #eef6ec);
    outline: none;
}

.pf-page .input-hint {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: #a3a29b;
}

/* Colour key of the date pickers, the same three states and labels as the legend of
   the availability calendar. Above the fields: the open calendar covers what is below
   them. The swatch colours come from calendarOccupancy.css, together with the days. */
.pf-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: -4px 0 14px;
}

.pf-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    color: #6f6e6a;
}

.pf-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

/* Why a stay shorter than the minimum went through — shown only when a last-minute
   offer covers the chosen dates, so it wears the accommodation's own accent. */
.pf-offer-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--theme-tint, #f1f5ee);
    color: var(--theme-strong, var(--theme-color, #4a4a46));
    font-size: .85rem;
}

/* --- Price estimate card: one number the guest reads, the breakdown on request --- */
.pf-estimate-empty {
    margin: 0;
    font-size: .9rem;
    color: #6f6e6a;
}

.pf-estimate-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--theme-tint, #f1f5ee);
}

.pf-estimate-label {
    font-size: .9rem;
    color: var(--theme-strong, var(--theme-color, #4a4a46));
}

.pf-estimate-amount {
    font-size: 1.35rem;
    font-weight: 700;
    color: #2c2c2a;
    white-space: nowrap;
}

.pf-estimate-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    font-size: .82rem;
    color: #6f6e6a;
    cursor: pointer;
}

.pf-estimate-toggle:hover {
    color: var(--theme-strong, var(--theme-color));
}

.pf-estimate-lines {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    font-size: .88rem;
}

.pf-estimate-lines td {
    padding: 6px 0;
    border-top: 1px solid #f0efeb;
    vertical-align: top;
}

.pf-estimate-line-amount {
    text-align: right;
    white-space: nowrap;
}

.pf-page .validation-message,
.pf-page .field-validation-error {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: #a32d2d;
    background: none;
    padding: 0;
}

/* HxInputDate wraps its input in .hx-form-group - strip the duplicated chrome so
   the date field matches the plain inputs next to it. */
.pf-page .hx-form-group {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
    font-size: inherit;
}

/* HxInputDate renders its calendar popup inside .input-container, so the broad
   field styling above leaks into the calendar's month/year <select>s. Restore the
   calendar's own compact, borderless look (mirrors reservationEdit.css). */
.pf-page .hx-calendar .form-select {
    width: auto;
    padding: 4px 28px 4px 8px;
    border-color: transparent;
    border-radius: 10px;
    background-color: transparent;
    /* The broad field rule above uses the `background` shorthand, which resets
       repeat/position to their initials - restore them so the chevron shows once
       instead of tiling into a zigzag. */
    background-repeat: no-repeat;
    background-position: right 8px center;
    box-shadow: none;
}

.pf-page .hx-calendar .form-select:hover {
    background-color: #f4f2ec;
}

.pf-page .hx-calendar .form-select:focus {
    border-color: var(--theme-strong, var(--theme-color));
    background-color: #fff;
    box-shadow: none;
}

/* --- Calendar days: the selected stay ---------------------------------------
   The occupancy colours of the days come from Components/calendarOccupancy.css, which
   is bundled before this file: the range rules below weigh the same and win the tie by
   coming later - the stay the guest picked is drawn over the occupancy. Havit's own
   scoped stylesheet is linked after the global ones (see App.razor), so every rule
   carries one class more than the .hx-calendar-day-* rule it overrides. */

/* The whole stay stays visible in BOTH calendars: the nights between the two edge
   days only tinted, so the arrival/departure days keep reading as the boundaries.
   Not the plain --theme-tint: next to the pale green of a free day it would vanish.
   The days are separate tiles (calendarOccupancy.css), so the range is a run of
   highlighted tiles rather than one joined bar. */
.pf-page .hx-calendar .hx-calendar-day.day-range-middle {
    background: color-mix(in srgb, var(--theme-color) 24%, #fff);
    color: var(--theme-strong, var(--theme-color));
    font-weight: 600;
    opacity: 1;
}

.pf-page .hx-calendar .hx-calendar-day.day-range-start,
.pf-page .hx-calendar .hx-calendar-day.day-range-end {
    background: var(--theme-color);
    color: #fff;
    font-weight: 600;
    opacity: 1;
}

/* "Today" marker: a themed ring so the guest can always locate the current day.
   Today is usually not bookable (arrival is allowed only from tomorrow) - its muted
   number says so, the ring stays at full strength. The three-class selector outweighs
   Havit's own single-class .hx-calendar-day-today rule. */
.pf-page .hx-calendar .hx-calendar-day.hx-calendar-day-today {
    box-shadow: inset 0 0 0 1.5px var(--theme-color);
    opacity: 1;
}

/* --- Privacy toggle row - sits below the fields, separated by a hairline --- */
.pf-consent {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f0efeb;
}

/* --- Footnote under a card (e.g. "answer within 24 hours") --- */
.pf-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 18px;
    padding: 10px 14px;
    border: 1px solid var(--theme-tint, #d3e0f8);
    border-radius: 10px;
    background: var(--theme-tint, #f4f7fd);
    color: var(--theme-strong, #1d4ed8);
    font-size: .82rem;
    line-height: 1.5;
}

.pf-note .bi {
    margin-top: 1px;
    flex-shrink: 0;
}

.pf-note a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* --- Top-level validation summary --- */
.pf-page .validation-errors {
    list-style: none;
    margin: 0 24px 20px;
    padding: 12px 16px;
    border: 1px solid #eecccc;
    border-radius: 10px;
    background: #fceaea;
    color: #a32d2d;
    font-size: .83rem;
}

.pf-page .validation-errors:empty {
    display: none;
}

.pf-page .validation-errors li {
    padding: 2px 0;
    list-style: none;
    color: #a32d2d;
}

/* --- Submit bar - the tinted foot of the bubble, mirroring .pf-head.
   Scoped under .pf-page so it out-specifies any global .btn chrome. */
.pf-page .pf-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 18px 24px;
    border-top: 1px solid #efeee9;
    background: linear-gradient(0deg, var(--theme-tint, #f1f5ee) 0%, #fff 100%);
}

/* Stejná zelená jako hlavička a .page-btn.is-primary — dřív tu byl tmavší
   --theme-strong, takže tlačítko nesedělo se zbytkem webu. Tvar (obdélník
   s radiusem 8px) zůstává formulářový, pilulku si drží jen .page-btn. */
.pf-page .pf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 28px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--theme-color);
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .15s;
}

.pf-page .pf-submit:hover:not(:disabled) {
    background: var(--theme-strong);
    color: #fff;
}

.pf-page .pf-submit:disabled {
    opacity: .6;
    cursor: progress;
}

/* Spinner v tlačítku, které čeká na server — sdílený všemi odesílacími tlačítky hosta (formuláře,
   přijetí nabídky, zprávy, check-in, účet). inline-block, aby měl rozměr i v tlačítku bez flexu. */
.pf-spinner {
    display: inline-block;
    vertical-align: -.125em;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pf-spin .75s linear infinite;
}

@keyframes pf-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pf-spinner {
        animation-duration: 2s;
    }
}

/* Tlačítko statického formuláře (přihlášení, registrace, hesla) během odesílání — spinner mu
   přidá site.js a místo ikony svítí jen on. */
.is-busy > .bi {
    display: none;
}

/* Souhrn chyb kontaktního formuláře (.rc-errors z reservationEdit.css) sedí v patičce bubliny
   na vlastním řádku nad tlačítkem. */
.pf-page .pf-actions .rc-errors {
    flex-basis: 100%;
    margin: 0;
}

@media (max-width: 640px) {
    .pf-shell {
        border-radius: 18px;
    }

    .pf-head {
        padding: 20px 16px 18px;
    }

    .pf-card {
        padding: 18px 16px 20px;
    }

    .pf-page .validation-errors {
        margin: 0 16px 16px;
    }

    .pf-page .pf-actions {
        justify-content: stretch;
        padding: 16px;
    }

    .pf-page .pf-submit {
        flex: 1 1 100%;
    }
}

/* wwwroot/styles/Pages/priceList.css */
/* Ceník — the same "minimal canvas" treatment as the homepage, the public forms
   and the privacy policy: white cards on the page background, the accommodation's
   brand showing only through the shared theme tokens (--theme-color / -strong /
   -tint), activated by data-theme="<slug>" on .pl-page.

   Every block (seasons, fees, cancellation terms) keeps its own frame and is only
   lightly washed with the brand tint — the same tinted-edge treatment the
   reservation form uses on .pf-head / .pf-actions (publicForm.css).

   Global (not scoped) on purpose: the fee rows are rendered by the PriceItem child
   component, whose markup sits outside the page's CSS scope. */

/* The page fills the same column as the homepage, the contact and the availability
   page (.content, max-width 1150px) — only the side padding belongs here. */
.pl-page {
    --ink: #2c2c2a;
    --ink-soft: #6f6e6a;
    --ink-faint: #a3a29b;
    --hairline: #e3e3e0;
    --hairline-soft: #f0efeb;

    width: 100%;
    padding: 0 1rem 4rem;
    box-sizing: border-box;
    color: var(--ink);
}

/* Sections are titled by the shared .section-head (sectionHead.css), which brings
   its own bottom margin — only the gap above it belongs here. */
.pl-section {
    margin-top: var(--element-spacing-tablet);
}

    /* No hero card — the page opens on the seasons, and the layout's own top
       padding is the gap. */
    .pl-section:first-child {
        margin-top: 0;
    }

/* ── Season cards ─────────────────────────────────────────────────────────── */

/* auto-fit rather than a fixed count: a season with no price is not rendered at
   all, so the grid has to look right with two cards as well as with four. */
.pl-seasons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

/* In between, three across would leave a single orphan on the second row. */
@media (min-width: 560px) and (max-width: 899px) {

    .pl-seasons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pl-season {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color .15s, transform .12s, box-shadow .15s;
}

    .pl-season:hover {
        border-color: var(--theme-color);
        transform: translateY(-2px);
        box-shadow: 0 18px 32px -26px rgba(0, 0, 0, .55);
    }

    /* The season that costs the most (Silvestr) carries a filled icon so the grid
       has one focal point instead of four identical cards. */
    .pl-season.is-highlight {
        border-color: color-mix(in srgb, var(--theme-color) 35%, var(--hairline));
    }

.pl-season-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(180deg, var(--theme-tint) 0%, #fff 100%);
    border-bottom: 1px solid var(--hairline-soft);
}

.pl-season-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-strong) 15%, transparent);
    color: var(--theme-strong);
    font-size: 1.05rem;
}

.pl-season.is-highlight .pl-season-icon {
    background: var(--theme-color);
    box-shadow: none;
    color: #fff;
}

.pl-season-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.pl-season-meta {
    margin: 2px 0 0;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--ink-soft);
}

.pl-prices {
    margin: 0;
    padding: 6px 18px 16px;
}

.pl-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--hairline-soft);
}

    .pl-price-row:last-child {
        border-bottom: none;
    }

    .pl-price-row dt {
        font-size: .85rem;
        font-weight: 400;
        color: var(--ink-soft);
    }

    .pl-price-row dd {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
        white-space: nowrap;
        color: var(--theme-strong);
    }

/* ── Block shell (fees, cancellation terms) ───────────────────────────────── */

.pl-block {
    padding: 22px 24px 24px;
    /* The tint fades out within the first ~140px, so the block is "lightly washed"
       at the top rather than fully coloured. */
    background: linear-gradient(180deg, var(--theme-tint) 0%, #fff 140px);
    border: 1px solid var(--hairline);
    border-radius: 20px;
}

/* ── Fees ─────────────────────────────────────────────────────────────────── */

.pl-fees {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.pl-fee {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    transition: border-color .15s, transform .12s;
}

    .pl-fee:hover {
        border-color: var(--theme-color);
        transform: translateY(-1px);
    }

.pl-fee-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--theme-tint);
    color: var(--theme-strong);
    font-size: .95rem;
}

.pl-fee-text {
    min-width: 0;
}

.pl-fee-title {
    margin: 0;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
}

.pl-fee-value {
    margin: 3px 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--theme-strong);
}

.pl-fee-suffix {
    display: block;
    margin-top: 1px;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-soft);
}

/* ── Notes under a block ──────────────────────────────────────────────────── */

.pl-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 0;
    padding: 11px 14px;
    border: 1px solid var(--hairline-soft);
    border-radius: 12px;
    background: #fbfaf7;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

    .pl-note .bi {
        flex-shrink: 0;
        margin-top: .15em;
        color: var(--theme-strong);
    }

    /* The refundable deposit is money the guest hands over on arrival — it gets the
       brand wash so it does not read as another footnote. */
    .pl-note.is-accent {
        border-color: color-mix(in srgb, var(--theme-strong) 20%, transparent);
        background: var(--theme-tint);
        color: var(--theme-strong);
        font-weight: 500;
    }

        .pl-note.is-accent .bi {
            color: inherit;
        }

/* ── Cancellation terms ───────────────────────────────────────────────────── */

/* Reads as a sequence towards the arrival date, so the markers get connected. */
.pl-policy {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .pl-policy li {
        position: relative;
        padding: 0 0 18px 30px;
        color: var(--ink);
    }

        .pl-policy li:last-child {
            padding-bottom: 0;
        }

        .pl-policy li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .3em;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            border: 2px solid var(--theme-color);
            box-sizing: border-box;
        }

        .pl-policy li.is-strong::before {
            background: var(--theme-color);
        }

        .pl-policy li:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 5px;
            top: calc(.3em + 14px);
            bottom: 2px;
            width: 2px;
            background: var(--hairline);
        }

.pl-policy-term {
    margin: 0;
    font-size: .93rem;
    font-weight: 700;
    line-height: 1.45;
}

.pl-policy-desc {
    margin: 2px 0 0;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.pl-policy-more {
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

    .pl-policy-more a {
        color: var(--theme-strong);
        font-weight: 600;
    }

/* ── Closing call to action ───────────────────────────────────────────────── */

.pl-cta {
    margin-top: var(--element-spacing-tablet);
    padding: 2.2rem 1.5rem;
    text-align: center;
    border-radius: 22px;
    background: var(--theme-tint);
    border: 1px solid color-mix(in srgb, var(--theme-strong) 20%, transparent);
}

    .pl-cta > .bi {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin: 0 auto 1rem;
        border-radius: 50%;
        background: var(--theme-color);
        color: #fff;
        font-size: 1.35rem;
    }

    .pl-cta h2 {
        margin: 0 0 .5rem;
        font-size: 1.15rem;
        font-weight: 700;
    }

    .pl-cta p {
        max-width: 52ch;
        margin: 0 auto 1.3rem;
        font-size: .93rem;
        line-height: 1.65;
        color: var(--ink-soft);
    }

/* The button itself is the shared .page-btn (Styles/Components/pageButton.css). */

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 560px) {

    .pl-block {
        padding: 18px 16px 20px;
        border-radius: 16px;
    }

    .pl-season {
        border-radius: 16px;
    }
}

@media only screen and (min-width: 992px) {

    .pl-page {
        padding: 0 1.5rem 5rem;
    }

    .pl-section,
    .pl-cta {
        margin-top: var(--element-spacing-computer);
    }
}

@media only screen and (min-width: 1200px) {

    .pl-page {
        padding: 0 0 5rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pl-season:hover,
    .pl-fee:hover {
        transform: none;
    }
}

/* wwwroot/styles/Pages/auth.css */
/* Autentizační stránky (přihlášení / registrace) — jedna sdílená karta.

   Záměrně NEpoužívají `acct-*` (account.css): ten patří přihlášenému uživateli do
   podsekce Účet, kde je pill sub-navigace mezi profilem / e-mailem / heslem. Tohle
   je naopak vstupní brána — jedna soustředěná karta bez navigace, ve stejném
   vizuálním jazyce jako veřejné stránky (hero karta s tintem, pilulkové CTA).

   Struktura:
     <div class="auth-page" data-theme="…">
       <div class="auth-card">
         <header class="auth-head">   badge + title + lead (+ .auth-perks)
         <EditForm class="auth-form"> .auth-fields → .auth-row → .auth-actions
         <p class="auth-switch">      přepnutí přihlášení ⇄ registrace
       <p class="auth-note">          drobná poznámka pod kartou

   Globální (ne scoped) schválně: obě stránky musí vypadat identicky a stejnou
   kartu dostanou i případné další stránky (zapomenuté heslo, obnova hesla).
   Barvy jen z brand tokenů (--theme-color / -strong / -tint) přes [data-theme],
   nikdy z natvrdo zapsaného --green/--brown. CTA sdílí `.page-btn`
   (styles/Components/pageButton.css). */

.auth-page {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
    box-sizing: border-box;
}

/* ── Karta ── */
.auth-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 26px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 24px 48px -32px rgba(0, 0, 0, .55);
    overflow: hidden;
}

/* ── Hlavička karty ── */
.auth-head {
    padding: 2rem 1.6rem 1.7rem;
    background: linear-gradient(155deg, var(--theme-tint) 0%, #fff 78%);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    text-align: center;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 18px;
    background: #fff;
    color: var(--theme-strong);
    font-size: 1.5rem;
    box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .6);
}

.auth-title {
    margin: 1.05rem 0 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: #2f2f2f;
    overflow-wrap: break-word;
}

.auth-lead {
    max-width: 34ch;
    margin: .7rem auto 0;
    font-size: .96rem;
    line-height: 1.6;
    color: #5f5e5a;
}

/* Chipy s výhodami účtu — jen na registraci. */
.auth-perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
}

    .auth-perks li {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .3rem .6rem;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 999px;
        background: #fff;
        font-size: .75rem;
        font-weight: 600;
        color: #5f5e5a;
    }

    .auth-perks .bi {
        color: var(--theme-strong);
        font-size: .85rem;
    }

/* ── Formulář ── */
.auth-form {
    padding: 1.6rem;
}

/* ── Inline alert nad poli (výsledek odeslání, chyby obnovy hesla) ── */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 1.2rem;
    padding: .8rem 1rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: .9rem;
    line-height: 1.5;
    text-align: left;
}

    .auth-alert .bi {
        flex-shrink: 0;
        margin-top: .1rem;
        font-size: 1rem;
    }

    .auth-alert.is-ok {
        background: var(--theme-tint);
        color: var(--theme-strong);
        border-color: color-mix(in srgb, var(--theme-strong) 25%, transparent);
    }

    .auth-alert.is-error {
        background: #fceaea;
        color: #a32d2d;
        border-color: #eecccc;
    }

    /* Nic se nepokazilo, jen chybí krok hosta (nepotvrzený e-mail) — proto ne červená. */
    .auth-alert.is-warn {
        background: #fdf5e6;
        color: #7a5410;
        border-color: #f0ddb4;
    }

/* Text alertu s akcí pod sebou (tlačítko „poslat znovu“). */
.auth-alert-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
}

.auth-alert-action {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s;
}

    .auth-alert-action:hover {
        background: rgba(255, 255, 255, .6);
    }

    .auth-alert .auth-alert-action .bi {
        margin-top: 0;
        font-size: .9rem;
    }

/* Souhrn validačních chyb celého modelu (ValidationSummary Model="@Model"). */
.auth-form .validation-errors {
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

    .auth-form .validation-errors .validation-message {
        display: block;
        margin: 0;
        padding: 0;
        background: transparent;
        font-size: .82rem;
        color: #a32d2d;
        text-align: left;
    }

.auth-fields {
    display: grid;
    gap: 1rem;
}

/* Neutralizuje globální bílý zaoblený `.input-container` z textBox.css. */
.auth-fields .input-container {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.auth-fields label {
    display: block;
    margin-bottom: .35rem;
    text-align: left;
    font-size: .82rem;
    font-weight: 600;
    color: #4a4945;
}

.auth-fields input,
.auth-fields .form-control {
    width: 100%;
    margin: 0;
    padding: .8rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    color: #2c2c2a;
    background: #fbfbf9;
    border: 1px solid #dcdad1;
    border-radius: 12px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

/* Blazor přidává `invalid` po validaci — bez toho by pole s chybovou hláškou pod
   sebou mělo pořád neutrální rámeček. */
.auth-fields input.invalid,
.auth-fields .form-control.invalid {
    border-color: #d99a9a;
    background: #fffafa;
}

.auth-page input.invalid:focus,
.auth-page .form-control.invalid:focus {
    border-color: #a32d2d !important;
    box-shadow: 0 0 0 3px rgba(163, 45, 45, .12);
}

.auth-fields .input-hint {
    display: block;
    margin-top: .3rem;
    font-size: .78rem;
    color: #a3a29b;
}

.auth-fields .validation-message,
.auth-fields .field-validation-error {
    display: block;
    width: auto;
    margin-top: .35rem;
    padding: 0;
    background: transparent;
    font-size: .78rem;
    color: #a32d2d;
    text-align: left;
}

/* Focus v barvě ubytování místo bootstrapí modré. */
.auth-page input:focus,
.auth-page .form-control:focus {
    background: #fff;
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 3px var(--theme-tint);
}

/* ── Řádek pod poli: „zůstat přihlášen" + zapomenuté heslo ──
   Selektory s názvem elementu (label./span.) schválně: scoped pravidla
   komponenty ToggleSwitch mají stejnou specificitu a načítají se později
   (Web.styles.css až za globálními styly), takže bez toho by přebila tahle. */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    margin-top: 1.15rem;
}

.auth-page label.toggle-switch-container {
    width: auto;
    margin: 0;
    padding: 0;
    gap: .6rem;
    background: transparent;
    border-radius: 0;
    justify-content: flex-start;
}

.auth-page span.toggle-switch-label {
    font-size: .88rem;
    color: #5f5e5a;
}

.auth-link {
    font-size: .88rem;
    font-weight: 600;
    color: var(--theme-strong);
    text-decoration: none;
}

    .auth-link:hover {
        color: var(--theme-strong);
        text-decoration: underline;
    }

/* ── CTA ── */
.auth-actions {
    display: grid;
    margin-top: 1.5rem;
}

    .auth-actions .page-btn {
        width: 100%;
    }

/* ── Patička karty: přepnutí přihlášení ⇄ registrace ── */
.auth-switch {
    margin: 0;
    padding: 1.1rem 1.6rem 1.35rem;
    border-top: 1px solid #f0efeb;
    background: #faf9f6;
    text-align: center;
    font-size: .92rem;
    color: #5f5e5a;
}

    .auth-switch a {
        font-weight: 600;
        color: var(--theme-strong);
        text-decoration: none;
    }

        .auth-switch a:hover {
            color: var(--theme-strong);
            text-decoration: underline;
        }

/* ── Poznámka pod kartou ── */
.auth-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: 1.1rem 0 0;
    font-size: .85rem;
    color: #8a8880;
    text-align: center;
}

@media only screen and (min-width: 992px) {

    .auth-page {
        max-width: 34rem;
    }

    .auth-card {
        border-radius: 34px;
    }

    .auth-head {
        padding: 2.4rem 2.2rem 2rem;
    }

    .auth-title {
        font-size: 2rem;
    }

    .auth-form {
        padding: 1.9rem 2.2rem;
    }

    .auth-switch {
        padding: 1.2rem 2.2rem 1.5rem;
    }
}

/* wwwroot/styles/Pages/legal.css */
/* Legal pages — the privacy policy and the terms and conditions share one design:
   "minimal canvas" treatment borrowed from the administration pages (gallery, brand
   theme, Ubyport, accommodation settings): white cards on the page background, brand
   accent only through the shared theme tokens (--theme-color / -strong / -tint),
   activated by data-theme on .legal-page.

   Global rather than scoped: two pages, one design — a scoped copy each would be two
   files drifting apart. The pv-* prefix predates the terms page; lg-* rules are the
   pieces only the terms page needs (numbered articles, booking steps, fee tiers). */

.legal-page {
    --ink: #2c2c2a;
    --ink-soft: #6f6e6a;
    --ink-faint: #a3a29b;
    --hairline: #e3e3e0;
    --hairline-soft: #f0efeb;

    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
    color: var(--ink);
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.pv-hero {
    text-align: center;
    padding: 2.4rem 1rem 2rem;
    margin-bottom: 1.75rem;
    background: linear-gradient(180deg, var(--theme-tint) 0%, transparent 100%);
    border-radius: 24px;
}

.pv-hero-badge {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--theme-color);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--theme-color) 14%, transparent);
}

.pv-hero h1 {
    margin: 0 0 .8rem;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

.pv-hero-lead {
    max-width: 62ch;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-soft);
}

.pv-hero-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.2rem;
}

.pv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.pv-pill-outline {
    background: #fff;
    border-color: var(--theme-color);
    color: var(--theme-strong);
}

.pv-pill-tint {
    background: var(--theme-tint);
    color: var(--theme-strong);
    border-color: color-mix(in srgb, var(--theme-strong) 20%, transparent);
}

/* ── Bubble navigation ────────────────────────────────────────────────── */
.pv-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 2rem;
}

.pv-bubble {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--hairline);
    color: var(--ink-soft);
    font-size: .84rem;
    text-decoration: none;
    transition: background-color .15s, border-color .15s, color .15s, transform .12s;
}

.pv-bubble .bi {
    font-size: .85rem;
    color: var(--theme-strong);
}

.pv-bubble:hover {
    background: var(--theme-tint);
    border-color: var(--theme-color);
    color: var(--theme-strong);
    transform: translateY(-1px);
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.pv-card {
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 22px 24px 24px;
    margin-bottom: 1.25rem;
    /* Breathing room only — clearing the sticky header is html's scroll-padding-top. */
    scroll-margin-top: 1.5rem;
}

.pv-card-accent {
    border-color: color-mix(in srgb, var(--theme-color) 35%, var(--hairline));
    background: linear-gradient(180deg, var(--theme-tint) 0%, #fff 45%);
}

.pv-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--hairline-soft);
}

.pv-card-head > .bi {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--theme-tint);
    color: var(--theme-strong);
    font-size: 1.05rem;
}

.pv-card-head h2 {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
}

.pv-lead {
    margin: 0 0 14px;
    font-size: .93rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

/* ── Controller identity + facts ──────────────────────────────────────── */
.pv-identity {
    margin-bottom: 16px;
}

.pv-identity-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.pv-identity-form {
    margin: 2px 0 0;
    font-size: .87rem;
    color: var(--ink-soft);
}

/* Every grid here takes min(…, 100%): a bare minmax(280px, …) track stays 280px wide
   on a phone where the card has ~260px inside, and the boxes stick out past its right edge. */
.pv-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 12px;
    margin: 0;
}

.pv-facts > div {
    padding: 12px 14px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: #fbfaf7;
    min-width: 0;
}

.pv-facts dt {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .74rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--ink-soft);
    margin-bottom: 5px;
}

.pv-facts dt .bi {
    color: var(--theme-strong);
}

.pv-facts dd {
    margin: 0;
    font-size: .92rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.pv-facts dd a {
    color: var(--theme-strong);
    font-weight: 600;
    text-decoration: none;
}

.pv-facts dd a:hover {
    text-decoration: underline;
}

/* ── Data groups ──────────────────────────────────────────────────────── */
.pv-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 14px;
}

.pv-group {
    padding: 16px 18px 18px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: #fbfaf7;
}

.pv-group.is-duty {
    background: var(--theme-tint);
    border-color: color-mix(in srgb, var(--theme-strong) 22%, transparent);
}

.pv-group h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--ink);
}

.pv-group h3 .bi {
    color: var(--theme-strong);
    font-size: .95rem;
}

.pv-group-note {
    margin: 0 0 10px;
    font-size: .82rem;
    line-height: 1.55;
    color: var(--theme-strong);
    font-weight: 500;
}

/* ── Lists ────────────────────────────────────────────────────────────── */
.pv-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.pv-list-cols {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 9px 20px;
}

.pv-list li {
    position: relative;
    padding-left: 22px;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--ink);
}

.pv-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-color);
}

.pv-list-check li::before {
    content: "\2713"; /* ✓ — plain glyph, no icon-font dependency */
    left: 2px;
    top: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--theme-strong);
    font-size: .9rem;
    line-height: 1.6;
}

/* Retention reads as a sequence, so the dots get connected. */
.pv-list-timeline li::before {
    background: #fff;
    border: 2px solid var(--theme-color);
    left: 2px;
    width: 11px;
    height: 11px;
    top: .5em;
}

.pv-list-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 7px;
    top: calc(.5em + 13px);
    bottom: -9px;
    width: 2px;
    background: var(--hairline);
}

/* ── Notes ────────────────────────────────────────────────────────────── */
.pv-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f7f6f2;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

.pv-note .bi {
    flex-shrink: 0;
    margin-top: .15em;
    color: var(--theme-strong);
}

/* ── Recipient guarantees ─────────────────────────────────────────────── */
.pv-guarantees {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline-soft);
}

.pv-guarantee {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--theme-tint);
    border: 1px solid color-mix(in srgb, var(--theme-strong) 20%, transparent);
    color: var(--theme-strong);
    font-size: .82rem;
    font-weight: 500;
}

/* ── Rights ───────────────────────────────────────────────────────────── */
.pv-rights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 12px;
}

.pv-right {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    font-size: .9rem;
    line-height: 1.55;
    transition: border-color .15s, transform .12s;
}

.pv-right:hover {
    border-color: var(--theme-color);
    transform: translateY(-1px);
}

.pv-right > .bi {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--theme-tint);
    color: var(--theme-strong);
    font-size: .88rem;
}

/* ── Contact ──────────────────────────────────────────────────────────── */
.pv-contact {
    margin-top: 2rem;
    padding: 2.2rem 1.5rem;
    text-align: center;
    border-radius: 22px;
    background: var(--theme-tint);
    border: 1px solid color-mix(in srgb, var(--theme-strong) 20%, transparent);
    scroll-margin-top: 1.5rem;
}

.pv-contact > .bi {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--theme-color);
    color: #fff;
    font-size: 1.35rem;
}

.pv-contact h2 {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.pv-contact p {
    max-width: 52ch;
    margin: 0 auto 1.3rem;
    font-size: .93rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

.pv-contact-link {
    display: inline-flex;
    align-items: center;
    padding: 11px 26px;
    border-radius: 14px;
    background: var(--theme-color);
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s;
}

.pv-contact-link:hover {
    background: var(--theme-strong);
    color: #fff;
}

/* ── Terms: numbered articles and clauses ─────────────────────────────── */
/* The numbers come from CSS counters, not from the text: a clause is quoted as
   "čl. 4.3", and inserting a section must not leave stale numbers in four resx
   files. The article counter lives on the wrapper, the clause counter per card. */
.lg-articles {
    counter-reset: article;
}

.lg-article {
    counter-increment: article;
}

.lg-article .pv-card-head h2::before {
    content: counter(article) ". ";
    color: var(--theme-strong);
}

.lg-clauses {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
    counter-reset: clause;
}

.lg-clauses > li {
    counter-increment: clause;
    position: relative;
    padding-left: 2.6rem;
    font-size: .92rem;
    line-height: 1.65;
    color: var(--ink);
}

.lg-clauses > li::before {
    content: counter(article) "." counter(clause);
    position: absolute;
    left: 0;
    top: 0;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.95;
    color: var(--theme-strong);
    font-variant-numeric: tabular-nums;
}

.lg-clauses a,
.lg-steps a {
    color: var(--theme-strong);
    font-weight: 600;
}

.lg-scope {
    margin-top: 18px;
}

/* ── Terms: booking steps ─────────────────────────────────────────────── */
.lg-steps {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 12px;
    counter-reset: step;
}

.lg-step {
    counter-increment: step;
    padding: 14px 16px 16px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: #fbfaf7;
}

.lg-step.is-binding {
    background: var(--theme-tint);
    border-color: color-mix(in srgb, var(--theme-strong) 22%, transparent);
}

.lg-step h3 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    font-size: .92rem;
    font-weight: 700;
}

.lg-step h3::before {
    content: counter(step);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--theme-color);
    color: #fff;
    font-size: .78rem;
}

.lg-step p {
    margin: 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--ink-soft);
}

/* ── Terms: cancellation fee tiers ────────────────────────────────────── */
.lg-tiers {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    overflow: hidden;
}

.lg-tiers li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 10px 14px;
    font-size: .88rem;
    line-height: 1.5;
    background: #fff;
}

.lg-tiers li + li {
    border-top: 1px solid var(--hairline-soft);
}

.lg-tiers li.is-strong {
    background: var(--theme-tint);
}

.lg-tier-term {
    font-weight: 600;
}

.lg-tier-fee {
    color: var(--ink-soft);
}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .pv-hero {
        padding: 1.5rem .75rem 1.25rem;
        margin-bottom: 1.25rem;
    }

    .pv-hero-badge {
        width: 52px;
        height: 52px;
        margin-bottom: .9rem;
        font-size: 1.3rem;
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--theme-color) 14%, transparent);
    }

    .pv-hero-lead {
        font-size: .94rem;
        line-height: 1.6;
    }

    /* Two pills right above the section bubbles read as two more buttons, and the law
       pill wraps into a two-line blob at 320px — on a phone the meta is plain text. */
    .pv-hero-meta {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        margin-top: 1rem;
    }

    .pv-pill {
        padding: 0;
        border: 0;
        background: none;
        font-size: .8rem;
    }

    .pv-pill-tint {
        color: var(--ink-soft);
        font-weight: 500;
    }

    /* Nine or ten bubbles wrap into six ragged centred rows (~300px) before the first
       card. On a phone they become one swipeable row bleeding to the screen edges; the
       faded right edge and the cut-off bubble tell that it scrolls. */
    .pv-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin: 0 -1rem 1.5rem;
        /* Top room for the hover lift; the end padding lets the last bubble clear the fade. */
        padding: 2px 2.5rem 4px 1rem;
        scroll-padding-inline: 1rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 2.5rem), transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 2.5rem), transparent 100%);
    }

    .pv-nav::-webkit-scrollbar {
        display: none;
    }

    .pv-bubble {
        flex-shrink: 0;
        white-space: nowrap;
        scroll-snap-align: start;
        font-size: .8rem;
        padding: 6px 12px;
    }

    .lg-clauses > li {
        padding-left: 2.3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pv-bubble:hover,
    .pv-right:hover {
        transform: none;
    }
}

/* wwwroot/variables.css */
:root {
    /* Colors */
    --red: rgb(220, 53, 69);
    --grey: rgb(69, 69, 69);
    --green: rgb(34, 139, 34);
    --dark-green: rgb(32, 104, 21);
    --brown: rgb(111, 78, 55);
    /* Font */
    --font: 'Open Sans', sans-serif, serif;
    /* Responsive */
    --element-spacing-mobile: 1.5rem;
    --element-spacing-tablet: 2rem;
    --element-spacing-notebook: 3rem;
    --element-spacing-computer: 4rem;
    /* Grey box (Components/greyBox.css and the legacy button components) */
    --greyBox-width: 80%;
    --greyBox-max-width: 30rem;
    --greyBox-height: 5rem;
    --grey-box-hover-color: rgb(141, 141, 141);
    --greyBox-border-radius: 30px;
    --greyBox-font-size: 1.5rem;
    /* Text box */
    --textBox-width: 80%;
    --textBox-max-width: 30rem;
    --textBox-border-radius: 70px;
    --main-paragraph-size: 1.2rem;
    /* Form */
    --form-background-text-area: white;
    /* Occupancy - the public availability calendar (OccupancyCalendar) and the date pickers of the
       reservation forms (Components/calendarOccupancy.css) paint a day the same way, so a guest who
       has seen one reads the other. A status, not decoration: the same in every house, never a
       brand token - otherwise "booked" would be a different colour in the brown and the green one. */
    --occupancy-free-bg: #edf5ea;
    --occupancy-free-line: #d8e8d2;
    --occupancy-free-fg: #3a3a38;
    --occupancy-taken-bg: #eed8d3;
    --occupancy-taken-fg: #a1544a;
    --occupancy-muted: #b9b6ae;
}

/* ── Brand theme tokens ────────────────────────────────────────────────────
   The per-accommodation token VALUES now live in the database (BrandTheme entity)
   and are emitted at runtime as a <style> block in App.razor — one block per
   color-theme slug: `.green,[data-theme="green"]`, `.brown,[data-theme="brown"]`,
   plus a `:root` default for the current accommodation. That injected stylesheet
   is linked AFTER this file, so it wins. Edit colors via admin → Brand theme.

   Two ways to activate a theme — both resolve to the SAME tokens:
     • class  .green / .brown        → filled brand box (background in layout.css)
                                        AND provides the tokens to descendants
     • attr   [data-theme="green"]   → tokens only, NO background fill

   Token meaning (consume these in components; never hard-code --green/--brown):
     --theme-color   base brand color   → solid fills, primary buttons, badges
     --theme-strong  darker brand shade → hover, emphasis, accent text/borders
     --theme-tint    light brand wash   → subtle backgrounds, pills, step icons
   Admin included: a filled control at rest (primary button, active tab or chip,
   checked toggle/checkbox, picked day) is --theme-color, the same as the public
   CTA; --theme-strong is only its hover. Strong stays the text colour on white
   because the base green there is under 4.5:1.
   Semantic status colors (--red / --grey / amber) stay independent of the brand.

   The :root fallback below only applies if the injected stylesheet is missing,
   so the tokens always resolve. */
:root {
    --theme-color: var(--green);
    --theme-strong: var(--dark-green);
    --theme-tint: #eef6ec;
}