/* Page chrome injected by the Worker into every page (src/placebar.js): the place switcher + Feedback entry in the header (.top / .hbar),
   the language menu (.ld), and the floating "Ask Lulu" button (.fab). Header backgrounds are always dark (photo or navy), so the header
   controls are light-on-dark pills. Logical properties throughout: the same rules lay out right to left. */
html[lang="en"] .lg:not([data-l="en"]), html[lang="es"] .lg:not([data-l="es"]), html[lang="de"] .lg:not([data-l="de"]), html[lang="he"] .lg:not([data-l="he"]), html[lang="fr"] .lg:not([data-l="fr"]) { display: none; }
.top .pb, .hbar .pb { flex: 1 1 100%; order: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.top .brand, .hbar .brand { order: 0; }
.top .ld, .hbar .ld { order: 1; }
@media (min-width: 760px) {
  .top .pb, .hbar .pb { flex: 1 1 auto; order: 1; margin-inline-start: 14px; }
  .top .ld, .hbar .ld { order: 2; }
}
.pb-d { position: relative; min-width: 0; }
.pb-btn, .pb-fb { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 700 14px/1 var(--sans, system-ui); color: #fff; text-decoration: none; cursor: pointer; background: rgba(15, 39, 71, .72); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); list-style: none; max-width: 100%; }
.pb-btn::-webkit-details-marker { display: none; }
.pb-btn:hover, .pb-fb:hover, .pb-d[open] > .pb-btn { border-color: rgba(255, 255, 255, .55); }
.pb-btn .ico-svg, .pb-fb .ico-svg { font-size: 18px; }
.pb-btn .pb-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-btn .ico-svg:last-child { font-size: 14px; transition: transform .15s; }
.pb-d[open] > .pb-btn .ico-svg:last-child { transform: rotate(180deg); }
.pb-btn:focus-visible, .pb-fb:focus-visible { outline: 3px solid var(--sun, #f39a1e); outline-offset: 2px; }
.pb-menu { position: absolute; inset-inline-start: 0; top: calc(100% + 8px); z-index: 60; width: min(330px, calc(100vw - 32px)); box-sizing: border-box; background: var(--surface, #fff); color: var(--ink, #0f2747); border: 1px solid var(--line, #e2dccf); border-radius: 18px; box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .25)); padding: 10px; text-align: start; font: 500 15px/1.35 var(--sans, system-ui); }
.pb-h { margin: 4px 8px 4px; font: 700 12px/1.2 var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #4d5d76); }
.pb-list { list-style: none; margin: 0; padding: 0; }
.pb-menu a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 12px; border-radius: 12px; color: inherit; text-decoration: none; font-weight: 650; }
.pb-menu a:hover { background: var(--accent-soft, #e3eef8); }
.pb-menu a[aria-current] { background: var(--accent-soft, #e3eef8); }
.pb-tag { font: 700 11px/1 var(--sans, system-ui); letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: var(--wa, #0f7a43); color: #fff; }
.pb-soon { margin: 6px 12px 2px; color: var(--muted, #4d5d76); font-size: 14px; }
.pb-menu .pb-a { color: var(--accent, #0a69b4); }
html[lang="he"] .pb-h, html[lang="he"] .pb-tag { letter-spacing: 0; text-transform: none; }

/* ---- Language menu ---------------------------------------------------------------------------------------------------------------
   Without JavaScript: the list of language links is simply visible (a pill of plain links, one per language, in its own language).
   With it (html.js, set by an inline script in <head> so there is no flash): only the button shows, and it opens the list. */
.ld { position: relative; flex: none; font: 700 14px/1 var(--sans, system-ui); }
.ld-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: rgba(15, 39, 71, .72); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(8px); color: #fff; font: inherit; letter-spacing: .02em; cursor: pointer; }
.ld-btn[hidden] { display: none; }
.ld-btn:hover, .ld.open .ld-btn { border-color: rgba(255, 255, 255, .55); }
.ld-btn:focus-visible { outline: 3px solid var(--sun, #f39a1e); outline-offset: 2px; }
.ld-globe { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ld-globe { width: 19px; height: 19px; stroke-width: 1.7; }
.ld-menu { list-style: none; margin: 0; padding: 0; }
.ld-i { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 0 14px; border-radius: 12px; color: inherit; text-decoration: none; font: 600 16px/1.2 var(--sans, system-ui); white-space: nowrap; }
/* no JavaScript: a dark pill with the five names in a row (wraps on a phone) */
html:not(.js) .ld-menu { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: rgba(15, 39, 71, .72); border: 1px solid rgba(255, 255, 255, .22); border-radius: 22px; }
html:not(.js) .ld-i { color: #dbe6f5; padding: 0 12px; font-size: 14px; border-radius: 999px; }
html:not(.js) .ld-i[aria-current] { background: #fff; color: #0f2747; }
/* JavaScript: the popup */
html.js .ld-menu { display: none; position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 70; box-sizing: border-box; min-width: 200px; padding: 6px; background: var(--surface, #fff); color: var(--ink, #0f2747); border: 1px solid var(--line, #e2dccf); border-radius: 18px; box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .25)); text-align: start; }
html.js .ld.open .ld-menu { display: block; }
html.js .ld-i:hover, html.js .ld-i:focus-visible { background: var(--accent-soft, #e3eef8); outline: none; }
html.js .ld-i:focus-visible { box-shadow: inset 0 0 0 3px var(--sun, #f39a1e); }
html.js .ld-i[aria-checked="true"], html.js .ld-i[aria-current] { color: var(--accent, #0a69b4); }
html.js .ld-i[aria-checked="true"]::after { content: ""; flex: none; width: 7px; height: 12px; margin-inline-end: 2px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-2px); }

/* footer link */
footer .pb-ff { font-weight: 700; color: var(--ink, inherit) !important; }

/* ---- Floating "Ask Lulu" ---------------------------------------------------------------------------------------------------------
   Bottom corner (bottom-left in right-to-left pages), 52px tall, above the safe areas. It opens a two-choice menu (WhatsApp / Chat here).
   public/placebar.js sets --fab-lift so it rides above a sticky bar and hides it while the on-screen keyboard is up; body.has-fab keeps a
   strip of room under the page, so at the end of any page the button sits on empty space, never on the last button or a footer link. */
body.has-fab { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.fabw { position: fixed; inset-inline-end: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px) + var(--fab-lift, 0px)); z-index: 40; transition: transform .18s ease, opacity .18s ease, bottom .22s ease; }
.fab { display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 52px; padding: 4px; padding-inline: 4px 18px; border-radius: 999px; background: #0f2747; color: #fff; text-decoration: none; font: 700 15px/1.15 var(--sans, system-ui); box-shadow: 0 6px 22px rgba(15, 39, 71, .38); border: 1px solid rgba(255, 255, 255, .28); cursor: pointer; }
.fab img { width: 42px; height: 42px; flex: none; border-radius: 50%; background: #fff; object-fit: cover; }
.fab:hover { background: #17386a; }
.fab:focus-visible { outline: 3px solid var(--sun, #f39a1e); outline-offset: 3px; }
.fab[hidden], .fab-menu[hidden] { display: none; }
html.js .fab-link { display: none; }
.fabw.away { opacity: 0; pointer-events: none; transform: translateY(8px); }
.fab-menu { list-style: none; margin: 0; padding: 6px; position: absolute; inset-inline-end: 0; bottom: calc(100% + 10px); z-index: 1; box-sizing: border-box; min-width: 190px; background: var(--surface, #fff); color: var(--ink, #0f2747); border: 1px solid var(--line, #e2dccf); border-radius: 18px; box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .25)); text-align: start; }
.fab-i { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 12px; color: inherit; text-decoration: none; font: 650 16px/1.2 var(--sans, system-ui); white-space: nowrap; }
.pb .ico-svg, .fab-i .ico-svg { width: 1em; height: 1em; flex: none; } /* (also for the pages that do not load site.css) */
.fab-i .ico-svg { font-size: 22px; }
.fab-i:hover, .fab-i:focus-visible { background: var(--accent-soft, #e3eef8); outline: none; }
.fab-i:focus-visible { box-shadow: inset 0 0 0 3px var(--sun, #f39a1e); }
html[lang="he"] .fab { letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .fabw, .pb-btn .ico-svg:last-child { transition: none; } .fabw.away { transform: none; } }
@media (max-width: 420px) { .fab { font-size: 14px; padding-inline: 4px 14px; gap: 8px; } }
@media print { .pb, .fabw, .ld { display: none; } }