s become the chips themselves. */
.pf-modal-sheet .pf-modal-body .iconline--tags {
align-items: flex-start; /* icon at top of multi-line chip row */
padding: 12px 0;
}
.pf-modal-sheet .pf-modal-body .iconline--tags i {
margin-top: 4px; /* nudge icon down to align with first chip */
}
.pf-modal-sheet .pf-modal-body .pf-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1 1 auto;
}
.pf-modal-sheet .pf-modal-body .pf-tag {
display: inline-flex;
align-items: center;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
color: #2c2c2e;
background: rgba(0, 0, 0, 0.05);
border-radius: 999px;
white-space: nowrap;
line-height: 1.4;
}
/* Restaurant description paragraph inside the detail popup. The
default `` weight (400) felt a little wispy under the chip
tags above it; 500 (medium) tightens it up just enough to read
as proper body copy without competing with the chip badges.
Applies to both `.pf-modal-sheet` (wellcome) and `.pf-modal-center`
(restaurants) so the body type matches across pages. */
.pf-modal-body .pf-info-description {
font-weight: 500;
color: #1c1c1e;
line-height: 1.55;
letter-spacing: 0.1px;
margin: 0;
}
/* Header logo — optional thumbnail rendered between the title-wrap
and the close button when `PFModal.create({ logo: '…' })` is used.
Lives in the header (not the body) so it acts as a proper brand
mark for the popup. Keeps a fixed footprint so it can't push the
title into the close button on long names. */
.pf-modal-header .pf-modal-logo {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
height: 38px;
width: auto;
min-width: 56px;
max-width: 110px;
padding: 3px 8px;
margin-right: 4px;
border-radius: 8px;
background: #ffffff;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
text-decoration: none;
overflow: hidden;
}
.pf-modal-header .pf-modal-logo img {
display: block;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain;
}
/* ───── Sticky action bar at the bottom of the sheet body ───────────
Keeps the primary "Anfragen / Reservieren" CTAs always visible
while the user scrolls the description. Uses position: sticky
inside the scrollable .pf-modal-body so we don't have to extend
the PFModal API with a separate footer slot. The bar is
edge-to-edge (the sheet body has bodyBleed:true for this popup),
has a subtle top hairline, and inherits the sheet background. */
.pf-modal-sheet .pf-info-cta {
position: sticky;
bottom: 0;
display: flex;
gap: 10px;
padding: 12px 16px max(env(safe-area-inset-bottom), 14px);
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid rgba(0, 0, 0, 0.07);
margin-top: 8px;
z-index: 2;
}
.pf-modal-sheet .pf-info-cta .pf-cta {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 18px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
border-radius: 14px;
text-decoration: none;
line-height: 1;
transition: transform 120ms ease, box-shadow 150ms ease, background 150ms ease;
}
.pf-modal-sheet .pf-info-cta .pf-cta:active { transform: scale(0.98); }
/* Primary (Anfragen / Reservieren) — green when bookings are direct,
yellow when the restaurant uses the inquiry flow. Keeps parity with
the legacy yellow/green choice but in a polished modern pill. */
.pf-modal-sheet .pf-info-cta .pf-cta-primary--inquire {
background: linear-gradient(135deg, #f5a623, #e08e0e);
color: #ffffff;
box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
}
.pf-modal-sheet .pf-info-cta .pf-cta-primary--inquire:hover {
background: linear-gradient(135deg, #ffb83a, #ed9d1a);
color: #fff;
}
.pf-modal-sheet .pf-info-cta .pf-cta-primary--reserve {
background: linear-gradient(135deg, #43be5f, #2ea14a);
color: #ffffff;
box-shadow: 0 4px 14px rgba(67, 190, 95, 0.35);
}
.pf-modal-sheet .pf-info-cta .pf-cta-primary--reserve:hover {
background: linear-gradient(135deg, #57d175, #36b056);
color: #fff;
}
/* "Needs a date first" state — the in-platform Partnerbetrieb reserve flow
requires a date to be chosen in the banner before live times can be
shown. Until then the green Reservieren pill shows as a neutral white
prompt ("Datum wählen") instead of inviting a click that can't resolve. */
.pf-modal-sheet .pf-info-cta .pf-cta-primary--reserve.is-needdate {
background: #ffffff;
color: #1c1c1e;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.pf-modal-sheet .pf-info-cta .pf-cta-primary--reserve.is-needdate:hover {
background: #f4f4f4;
color: #1c1c1e;
}
/* Secondary (Direct reservieren) — outlined neutral. */
.pf-modal-sheet .pf-info-cta .pf-cta-secondary {
background: rgba(0, 0, 0, 0.04);
color: #1c1c1e;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.pf-modal-sheet .pf-info-cta .pf-cta-secondary:hover {
background: rgba(0, 0, 0, 0.08);
color: #1c1c1e;
}
/* When the action bar is present, the description above needs a bit
of bottom margin so its last line isn't kissing the sticky bar. */
.pf-modal-sheet .pf-modal-body:has(.pf-info-cta) > div:not(.my_border):not(.pf-info-cta):last-child {
padding-bottom: 16px !important;
}
/* The legacy "my-divider" inside the text region is a colored bar — tone
it down to a subtle hairline inside the sheet. */
.pf-modal-sheet .pf-modal-body .my-divider {
height: 1px;
background: rgba(0, 0, 0, 0.08);
margin: 10px 0;
border: 0;
}
/* ═══════════════════════════════════════════════════════════════════════
PFMultiSelect — sheet-based multi-select component
Paired with /static/js/multiselect.js. The trigger reuses the
.input-container / .styled-input chrome so it sits flush alongside
the date / guests / schicht inputs.
═══════════════════════════════════════════════════════════════════════ */
/* The original