/* Hallmark · v2.0.0 · component: sitelib shared tools (booking, forms, signature, Avivi) · every colour and font from the host site's tokens */
/* Site library tools: structure only. Every colour, font and radius comes from the site's own tokens
   (--sl-paper, --sl-ink, --sl-soft, --sl-line, --sl-accent, --sl-on-accent, --sl-field, --sl-focus, --sl-radius, --sl-body),
   declared at :root in that site's style.css, so the same booking or form looks native on every site. */
.sl-sample { background: var(--sl-ink); color: var(--sl-paper); font: 400 14px/1.5 var(--sl-body); text-align: center; padding: 8px 16px; }
.sl-skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--sl-accent); color: var(--sl-on-accent); padding: 12px 16px; border-radius: var(--sl-radius); }
.sl-skip:focus-visible { top: 12px; }
.js .sl-rv.wait { opacity: 0; transform: translateY(14px); }
.js .sl-rv.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

/* fields */
.sl-field { display: grid; gap: 8px; margin: 0 0 16px; }
.sl-field label { font: 600 15px/1.4 var(--sl-body); }
.sl-field input, .sl-field textarea, .sl-field select { font: 400 17px/1.4 var(--sl-body); color: var(--sl-ink); background: var(--sl-field); border: 1.5px solid var(--sl-line); border-radius: var(--sl-radius); padding: 12px 16px; min-height: 48px; width: 100%; }
.sl-field input:hover, .sl-field textarea:hover { border-color: var(--sl-soft); }
.sl-field input:focus-visible, .sl-field textarea:focus-visible, .sl-field select:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 1px; border-color: var(--sl-ink); }
.sl-field [aria-invalid="true"] { border-color: var(--sl-err); }
.sl-err { font: 600 14px/1.4 var(--sl-body); color: var(--sl-err); min-height: 0; }
.sl-err:empty { display: none; }
.sl-check { display: flex; gap: 12px; align-items: flex-start; font: 400 15px/1.5 var(--sl-body); margin: 0 0 16px; }
.sl-check input { width: 24px; height: 24px; margin-top: 4px; accent-color: var(--sl-ink); flex: none; }
.sl-check input:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 2px; }
.sl-note { font: 400 14px/1.5 var(--sl-body); color: var(--sl-soft); margin: 12px 0 0; }

/* the button every tool uses (sites restyle .sl-btn as their one primary button) */
.sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 28px; border: 0; border-radius: var(--sl-radius); background: var(--sl-accent); color: var(--sl-on-accent); font: 600 17px/1.2 var(--sl-body); text-decoration: none; cursor: pointer; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.sl-btn:hover { transform: translateY(-1px); }
.sl-btn:active { transform: translateY(1px); }
.sl-btn:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 3px; transition: none; }
.sl-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* booking */
.sl-bk-step { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.sl-bk-step legend { font: 600 16px/1.4 var(--sl-body); padding: 0; margin-bottom: 12px; }
.sl-bk-step:disabled { color: var(--sl-soft); cursor: not-allowed; }
.sl-bk-step:disabled .sl-chips { min-height: 44px; border: 1.5px dashed var(--sl-line); border-radius: var(--sl-radius); }
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-chip { position: relative; }
.sl-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sl-chip span { display: block; min-height: 44px; padding: 12px 16px; border: 1.5px solid var(--sl-line); border-radius: var(--sl-radius); background: var(--sl-field); font: 400 15px/1.4 var(--sl-body); transition: background-color .15s ease, border-color .15s ease; }
.sl-chip input:hover + span { border-color: var(--sl-ink); }
.sl-chip input:checked + span { background: var(--sl-ink); color: var(--sl-paper); border-color: var(--sl-ink); }
.sl-chip input:focus-visible + span { outline: 3px solid var(--sl-focus); outline-offset: 2px; transition: none; }
.sl-chip.off span { opacity: .45; text-decoration: line-through; }
.sl-chip small { font-size: 12px; }
.sl-bk-sum { font: 600 16px/1.5 var(--sl-body); margin: 0 0 16px; }
.sl-done { padding: 24px; border: 1.5px solid var(--sl-line); border-radius: var(--sl-radius); background: var(--sl-field); }
.sl-done b { display: block; font: 600 20px/1.3 var(--sl-body); margin-bottom: 8px; }
.sl-done p { margin: 0; font: 400 16px/1.6 var(--sl-body); }
.sl-done:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 2px; }

/* signature */
.sl-sign { color: var(--sl-ink); margin: 0 0 16px; }
.sl-sign canvas { display: block; width: 100%; height: 150px; background: var(--sl-field); border: 1.5px dashed var(--sl-soft); border-radius: var(--sl-radius); touch-action: none; cursor: crosshair; }
.sl-sign canvas:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 2px; }
.sl-sign-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; font: 400 14px/1.4 var(--sl-body); color: var(--sl-soft); }
.sl-sign-row button { background: none; border: 0; color: var(--sl-ink); font: 600 14px/1 var(--sl-body); text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 8px; }
.sl-sign-row button:focus-visible { outline: 3px solid var(--sl-focus); }

/* Avivi: at the end of the reading line's far side (left in Hebrew, right in English) */
.sl-av { position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 40; font-family: var(--sl-body); }
.sl-av-btn { min-height: 48px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--sl-ink); color: var(--sl-paper); font: 600 16px/1 var(--sl-body); cursor: pointer; box-shadow: 0 10px 30px -12px var(--sl-ink); transition: transform .15s ease; }
.sl-av-btn:hover { transform: translateY(-2px); }
.sl-av-btn:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 3px; transition: none; }
.sl-av-panel { position: absolute; bottom: 60px; inset-inline-end: 0; width: 360px; max-height: min(560px, 75vh); overflow: auto; background: var(--sl-paper); color: var(--sl-ink); border: 1.5px solid var(--sl-line); border-radius: calc(var(--sl-radius) * 1.5); box-shadow: 0 30px 60px -30px var(--sl-ink); }
.sl-av-panel header { position: relative; padding: 20px 20px 12px; border-bottom: 1px solid var(--sl-line); }
.sl-av-panel header b { display: block; font-size: 18px; padding-inline-end: 40px; }
.sl-av-panel header span { display: block; font-size: 14px; color: var(--sl-soft); padding-inline-end: 32px; }
.sl-av-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 44px; height: 44px; border: 0; background: none; color: var(--sl-ink); font-size: 24px; cursor: pointer; border-radius: 50%; }
.sl-av-x:focus-visible { outline: 3px solid var(--sl-focus); }
.sl-av-body { padding: 12px 20px 16px; }
.sl-av-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sl-av-body li button { width: 100%; text-align: start; min-height: 44px; padding: 12px 12px; border: 1px solid var(--sl-line); border-radius: var(--sl-radius); background: var(--sl-field); color: var(--sl-ink); font: 400 15px/1.4 var(--sl-body); cursor: pointer; }
.sl-av-body li button:hover, .sl-av-body li button[aria-current] { border-color: var(--sl-ink); }
.sl-av-body li button:focus-visible { outline: 3px solid var(--sl-focus); }
.sl-av-a p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; }
.sl-av-wa { display: block; margin: 0 20px 20px; text-align: center; padding: 12px; border-radius: var(--sl-radius); background: var(--sl-accent); color: var(--sl-on-accent); font-weight: 600; text-decoration: none; }
.sl-av-wa:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sl-btn, .sl-av-btn, .sl-chip span { transition: none; } .js .sl-rv.wait { opacity: 1; transform: none; } }

/* numbers, prices, times and phones stay on one line inside Hebrew (they are wrapped in <bdi dir=ltr>) */
bdi { white-space: nowrap; }

/* on a phone Avivi is a smaller pill, so it covers less of the form under it */
@media (max-width: 480px) { .sl-av { bottom: 12px; inset-inline-end: 12px; } .sl-av-panel { position: fixed; inset-inline: 12px; bottom: 68px; width: auto; } .sl-av-btn { min-height: 44px; padding: 12px 16px; font-size: 15px; } }

/* units inside number fields (mortgage) */
.sl-unit { position: relative; }
.sl-unit span { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); color: var(--sl-soft); font: 400 15px/1 var(--sl-body); pointer-events: none; }
.sl-unit input { padding-inline-start: 64px; }
[dir=ltr] .sl-unit input { padding-inline-start: 14px; padding-inline-end: 64px; }
/* mortgage */
[data-sl-mortgage] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; }
[data-sl-mortgage] .sl-note { grid-column: 1 / -1; }
.sl-mg-main { padding: 20px; border-radius: var(--sl-radius); background: var(--sl-ink); color: var(--sl-paper); margin-bottom: 12px; }
.sl-mg-main span { display: block; font: 400 15px/1.4 var(--sl-body); }
.sl-mg-main b { display: block; font: 600 40px/1.1 var(--sl-body); font-variant-numeric: tabular-nums; margin-top: 4px; }
.sl-mg-rows { margin: 0; }
.sl-mg-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sl-line); font: 400 16px/1.4 var(--sl-body); }
.sl-mg-rows dt { color: var(--sl-soft); } .sl-mg-rows dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sl-mg-warn { margin: 12px 0 0; padding: 12px 16px; border-radius: var(--sl-radius); border: 1.5px solid var(--sl-err); font: 400 15px/1.5 var(--sl-body); }
/* catalog */
.sl-cat-f { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 24px; margin-bottom: 8px; }
.sl-cat-f .sl-field { margin: 0; min-width: 160px; }
.sl-seg { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sl-seg legend { font: 600 15px/1.4 var(--sl-body); padding: 0; margin-bottom: 8px; float: inline-start; width: 100%; }
.sl-cat-n { font: 400 15px/1.4 var(--sl-body); color: var(--sl-soft); margin: 8px 0 16px; }
.sl-cat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sl-cat-item a { display: grid; gap: 4px; text-decoration: none; color: var(--sl-ink); position: relative; font: 400 16px/1.5 var(--sl-body); }
.sl-cat-item img { width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: cover; border-radius: var(--sl-radius); margin-bottom: 8px; }
.sl-cat-item b { font-size: 19px; } .sl-cat-item span { color: var(--sl-soft); }
.sl-cat-item strong { font-size: 20px; font-variant-numeric: tabular-nums; margin-top: 4px; }
.sl-cat-item a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.sl-cat-item a:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 4px; border-radius: var(--sl-radius); }
.sl-cat-deal { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--sl-paper); color: var(--sl-ink) !important; padding: 4px 12px; border-radius: 99px; font-size: 14px; font-weight: 600; }
.sl-cat-empty { grid-column: 1 / -1; padding: 24px; border: 1.5px dashed var(--sl-line); border-radius: var(--sl-radius); font: 400 16px/1.5 var(--sl-body); }
/* menu */
.sl-mn-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.sl-chip-btn { flex: none; min-height: 44px; padding: 12px 20px; border: 1.5px solid var(--sl-line); border-radius: 99px; background: var(--sl-field); color: var(--sl-ink); font: 600 16px/1 var(--sl-body); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.sl-chip-btn:hover { border-color: var(--sl-ink); }
.sl-chip-btn[aria-pressed="true"] { background: var(--sl-ink); color: var(--sl-paper); border-color: var(--sl-ink); }
.sl-chip-btn:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 2px; transition: none; }
.sl-mn-tags { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 16px 0 4px; }
.sl-mn-list { list-style: none; margin: 8px 0 0; padding: 0; }
.sl-mn-item { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--sl-line); font: 400 16px/1.5 var(--sl-body); }
.sl-mn-item b { font-size: 19px; margin-inline-end: 8px; }
.sl-mn-item p { margin: 4px 0 0; color: var(--sl-soft); }
.sl-mn-item strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.sl-mn-tag { display: inline-block; font-size: 13px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--sl-line); color: var(--sl-soft); margin-inline-end: 4px; }
@media (max-width: 860px) { [data-sl-mortgage] { grid-template-columns: minmax(0, 1fr); } .sl-cat-list { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 600px) and (max-width: 860px) { .sl-cat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .sl-chip-btn { transition: none; } }

/* the owner's modules panel (library preview): opened from the sample strip */
.sl-sample { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 16px; }
.sl-mods-btn { min-height: 36px; padding: 8px 16px; border: 1.5px solid var(--sl-paper); border-radius: 99px; background: transparent; color: var(--sl-paper); font: 600 14px/1 var(--sl-body); cursor: pointer; }
.sl-mods-btn:hover { background: var(--sl-paper); color: var(--sl-ink); }
.sl-mods-btn:focus-visible { outline: 3px solid var(--sl-accent); outline-offset: 2px; }
.sl-mods { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; z-index: 60; width: min(400px, 92%); overflow: auto; background: var(--sl-paper); color: var(--sl-ink); box-shadow: 12px 0 40px -24px var(--sl-soft); font-family: var(--sl-body); padding-bottom: 24px; }
.sl-mods header { position: relative; background: var(--sl-paper); padding: 20px 20px 12px; border-bottom: 1px solid var(--sl-line); }
.sl-mods header b { font-size: 20px; } .sl-mods header p { margin: 8px 0 0; font-size: 15px; color: var(--sl-soft); padding-inline-end: 36px; }
.sl-mods-x { position: absolute; top: 12px; inset-inline-end: 12px; width: 44px; height: 44px; border: 0; background: none; color: var(--sl-ink); font-size: 26px; cursor: pointer; border-radius: 50%; }
.sl-mods-x:focus-visible { outline: 3px solid var(--sl-focus); }
.sl-mods ul { list-style: none; margin: 0; padding: 8px 12px; }
.sl-mods li label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 8px; border-bottom: 1px solid var(--sl-line); cursor: pointer; }
.sl-mods li.off label { cursor: not-allowed; color: var(--sl-soft); }
.sl-mods input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sl-sw { position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--sl-line); margin-top: 2px; transition: background-color .15s ease; }
.sl-sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--sl-field); box-shadow: 0 1px 3px var(--sl-soft); transition: transform .15s ease; }
.sl-mods input:checked + .sl-sw { background: var(--sl-ink); }
.sl-mods input:checked + .sl-sw::after { transform: translateX(-18px); }
[dir=ltr] .sl-mods input:checked + .sl-sw::after { transform: translateX(18px); }
.sl-mods input:focus-visible + .sl-sw { outline: 3px solid var(--sl-focus); outline-offset: 2px; }
.sl-mods input:disabled + .sl-sw { background: var(--sl-paper); border: 1.5px dashed var(--sl-line); cursor: not-allowed; }
.sl-mods input:disabled + .sl-sw::after { background: var(--sl-line); box-shadow: none; }
.sl-mods-t b { font-size: 16px; margin-inline-end: 8px; } .sl-mods-t span { display: block; font-size: 14px; color: var(--sl-soft); margin-top: 2px; }
.sl-tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--sl-accent); color: var(--sl-on-accent); }
.sl-tag.base { background: var(--sl-line); color: var(--sl-ink); } .sl-tag.no { background: transparent; border: 1px solid var(--sl-line); color: var(--sl-soft); }
.sl-mods .sl-note, .sl-mods-live { margin: 12px 20px 0; }
.sl-mods-live { font-size: 14px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .sl-sw, .sl-sw::after { transition: none; } }
/* portfolio with a category filter */
.sl-folio { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sl-folio figure { margin: 0; }
.sl-folio img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sl-radius); }
.sl-folio figcaption { margin-top: 8px; font-size: 15px; color: var(--sl-soft); }
@media (max-width: 860px) { .sl-folio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .sl-folio { gap: 8px; } .sl-folio figcaption { font-size: 14px; } }
/* colour and font sets (shown only when a site lists more than one) */
.sl-th-g { border: 0; margin: 0; padding: 12px 20px 4px; }
.sl-th-g legend { font-weight: 600; font-size: 16px; padding: 0; margin-bottom: 8px; }
.sl-th-o { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 8px; border-bottom: 1px solid var(--sl-line); cursor: pointer; }
.sl-th-o input { position: static; opacity: 1; width: 20px; height: 20px; accent-color: var(--sl-ink); margin: 0; }
.sl-th-o input:focus-visible { outline: 3px solid var(--sl-focus); outline-offset: 2px; }

.sl-mn-dur { display: block; margin-top: 4px; font-size: 14px; color: var(--sl-soft); }
/* fitness calculators */
.sl-fc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; margin-top: 20px; }
.sl-fc-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-content: start; }
.sl-field select { appearance: auto; }
@media (max-width: 860px) { .sl-fc-grid { grid-template-columns: minmax(0, 1fr); } }
/* a module that is off, or a field that is not used, is hidden even when its own rule sets a display */
[hidden] { display: none !important; }