/* ==================================================================
   תעודתא · שכבת העיצוב 4 (נובמבר 2026): האתר בשפה של האפליקציה.
   נטען אחרי style.css ודורס ממנו רק את מה שהשתנה: מסך המפה, מסך הפתיחה ועמוד העסק.
   העקרונות: תמונת אוכל בראש כל כרטיס, מסך ראשי נקי (חיפוש, שלושה צ'יפים, כפתור סינון אחד),
   קיבוץ מאופק במפה בצבע אחד, והרבה אוויר. אין כאן צבעים קשיחים חוץ מטקסט שיושב על תמונה.
   ================================================================== */
button, input, select, textarea { font-family: inherit; }

/* ---------- סרגל החיפוש: שורה אחת ---------- */
.filterbar { padding: .7rem clamp(.75rem, 2vw, 1.5rem); box-shadow: none; }
.searchrow { gap: .5rem; }
.locbox { flex: 1 1 320px; max-width: 560px; min-height: 46px; background: var(--surface); box-shadow: var(--shadow-sm); }
.quick { display: flex; gap: .4rem; }
.chip.kit::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.chip.kit.meat::before { color: var(--meat); } .chip.kit.dairy::before { color: var(--dairy); } .chip.kit.parve::before { color: var(--parve); }
.chip.kit.on { color: var(--ink); font-weight: 600; }
.chip.kit.meat.on { background: var(--meat-soft); border-color: var(--meat); }
.chip.kit.dairy.on { background: var(--dairy-soft); border-color: var(--dairy); }
.chip.kit.parve.on { background: var(--parve-soft); border-color: var(--parve); }
.filterbtn { font-weight: 600; }
.filterbtn svg { width: 18px; height: 18px; flex: none; }
.filterbtn .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: var(--primary); color: var(--primary-ink); font-size: .72rem; font-weight: 700; }
.filterbtn.has { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.viewtoggle { margin-inline-start: auto; }

/* ---------- מגירת הסינון ---------- */
.sheet.drawer .sheet-card { padding: 0; display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem .6rem; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.drawer-head .iconbtn { color: var(--ink-2); }
.fgroup { padding: .9rem 1.25rem; border-top: 1px solid var(--line-2); }
.fgroup h3 { font-size: 1rem; margin: 0 0 .5rem; }
.fgroup .fine { margin: 0 0 .7rem; font-size: .84rem; }
.fgroup-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .3rem; }
.fgroup-head h3 { margin: 0; }
.fgroup.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fgroup .chiprow { flex-wrap: wrap; overflow: visible; gap: .45rem; }
.fgroup .chiprow .sep { flex-basis: 100%; width: auto; height: 0; margin: .1rem 0; background: none; }
.chip.select.wide { width: 100%; min-height: 42px; }
.drawer-foot { margin-top: auto; position: sticky; bottom: 0; display: flex; gap: .6rem; padding: .9rem 1.25rem calc(.9rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.drawer-foot .btn.primary { flex: 1; }
@media (min-width: 720px) {
  .sheet.drawer { align-items: stretch; justify-content: flex-start; }
  .sheet.drawer .sheet-card { max-width: 440px; max-height: none; height: 100%; border-radius: 0; animation: slidein var(--t-slow) var(--ease); }
}
@keyframes slidein { from { transform: translateX(32px); opacity: .6; } to { transform: none; opacity: 1; } }
[dir=ltr] .sheet.drawer .sheet-card { animation-name: slideinl; }
@keyframes slideinl { from { transform: translateX(-32px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ---------- הבמה: מפה + רשימה ---------- */
.mapwrap { flex: 1; position: relative; min-width: 0; min-height: 0; }
.mapwrap .map { position: absolute; inset: 0; }
.panel { width: clamp(390px, 40vw, 620px); background: var(--bg); }
.panel-head { padding: 1rem 1.1rem .5rem; align-items: baseline; }
.panel-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.panel-head .count { color: var(--ink-3); font-size: .85rem; }
.area-btn { position: absolute; top: .9rem; left: 50%; transform: translateX(-50%); z-index: 500; border: 0; border-radius: var(--r-pill); padding: .55rem 1.15rem;
            background: var(--surface); color: var(--primary); font-weight: 700; font-size: .9rem; box-shadow: var(--shadow-md); cursor: pointer; }
.area-btn:hover { background: var(--primary); color: var(--primary-ink); }

/* אריחי קטגוריות, כמו בשורת האריחים באפליקציה */
.cats { display: flex; gap: .55rem; overflow-x: auto; padding: .35rem 1.1rem .8rem; scrollbar-width: none; flex: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: none; width: 74px; display: flex; flex-direction: column; align-items: center; gap: .3rem; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-2); }
.cat-img { width: 64px; height: 64px; border-radius: 20px; overflow: hidden; background: var(--pastel-peach); padding: 4px; transition: box-shadow var(--t-fast), transform var(--t-base) var(--ease); }
.cat-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.cat.tint-sage .cat-img { background: var(--pastel-sage); } .cat.tint-sky .cat-img { background: var(--pastel-sky); }
.cat.tint-butter .cat-img { background: var(--pastel-butter); } .cat.tint-lilac .cat-img { background: var(--pastel-lilac); } .cat.tint-rose .cat-img { background: var(--pastel-rose); }
.cat-name { font-size: .74rem; font-weight: 500; line-height: 1.2; text-align: center; }
.cat:hover .cat-img { transform: translateY(-2px); }
.cat.on .cat-img { box-shadow: 0 0 0 2.5px var(--primary); }
.cat.on .cat-name { color: var(--primary); font-weight: 700; }

/* כרטיס עסק: תמונה למעלה, שם ודירוג, כתובת, כשרות */
.results { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: .85rem; padding: .15rem 1.1rem 1.25rem; }
.result { display: flex; flex-direction: column; padding: 0; gap: 0; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.result:hover, .result.hl { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.result.hl { box-shadow: 0 0 0 2px var(--primary), var(--shadow-md); }
.result .ph { position: relative; aspect-ratio: 16 / 10; background: var(--pastel-peach); overflow: hidden; flex: none; }
.result .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-slow) var(--ease); }
.result:hover .ph img { transform: scale(1.05); }
.result.greyed { opacity: 1; }
.result.greyed .ph img { filter: grayscale(.85); opacity: .7; }
.result .ph .dist { position: absolute; top: .55rem; inset-inline-end: .55rem; background: rgba(255,255,255,.94); color: #1f1b16; padding: .12rem .6rem; font-size: .76rem; font-weight: 700; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.result .ph .kit { position: absolute; bottom: .55rem; inset-inline-start: .55rem; display: flex; gap: .25rem; }
.result .ph .kit .tag { border: 0; box-shadow: var(--shadow-sm); font-weight: 700; border-radius: var(--r-pill); padding: .05rem .6rem; }
.result .bd { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .85rem .85rem; min-width: 0; }
.result .row1 { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.result .name { font-size: 1.02rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.result .stars { flex: none; font-size: .85rem; font-variant-numeric: tabular-nums; }
.result .addr { font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .certs { margin-top: .35rem; }
.result .certs .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; }
.badge.more { background: var(--surface-2); color: var(--ink-2); }
.badge.more::before { display: none; }

/* תצוגת רשימה במסך רחב: בלי מפה, רשת כרטיסים מלאה */
@media (min-width: 761px) {
  .app.list-view .mapwrap { display: none; }
  .app.list-view .panel { width: 100%; border: 0; }
  .app.list-view .panel-head, .app.list-view .cats, .app.list-view .results { width: 100%; max-width: 1240px; margin-inline: auto; }
  .app.list-view .results { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; flex: 1 1 auto; }
}

/* ---------- המפה: סיכות קטנות, קיבוץ בצבע אחד ---------- */
div.pin { width: 20px; height: 20px; box-shadow: 0 1px 4px rgba(60,40,20,.35); }
div.pin::after { width: 6px; height: 6px; }
.leaflet-marker-icon.teu-cluster { display: grid; place-items: center; border-radius: 50%; background: var(--surface); color: var(--primary); border: 2px solid var(--primary);
               font-family: var(--font-display); font-weight: 700; font-size: .8rem; font-variant-numeric: tabular-nums;
               box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 16%, transparent), 0 2px 6px rgba(60,40,20,.2); transition: transform var(--t-fast) var(--ease); }
.teu-cluster:hover { transform: scale(1.08); background: var(--primary); color: var(--primary-ink); }
.leaflet-tile-pane { filter: saturate(.55) brightness(1.03) contrast(.96); }
.leaflet-popup-content-wrapper { overflow: hidden; border-radius: var(--r-lg); padding: 0; }
.leaflet-popup-content { margin: .85rem 1rem .9rem; }
.pp-photo { height: 116px; margin: -.85rem -1rem .7rem; overflow: hidden; background: var(--pastel-peach); }
.pp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-style .pp-photo { margin: 0 0 .6rem; border-radius: var(--r-sm); }
.leaflet-container a.leaflet-popup-close-button { top: 8px; right: 8px; width: 26px; height: 26px; line-height: 24px; border-radius: 50%; background: rgba(255,255,255,.92); color: #1f1b16; font-size: 18px; text-align: center; padding: 0; }

/* כלים קטנים על המפה: מקרא סגור כברירת מחדל, ודיווח על מקום חסר */
.map-tools { position: absolute; z-index: 500; inset-block-end: 1.25rem; inset-inline-start: 4.9rem; display: flex; align-items: flex-end; gap: .5rem; pointer-events: none; }
.map-tools > * { pointer-events: auto; }
.map-tools .missing-link, .map-tools .map-legend { position: static; margin: 0; }
.missing-link { font-size: .8rem; padding: .4rem .9rem; }
.map-legend { max-width: 17rem; padding: .4rem .9rem; border-radius: var(--r-lg); font-size: .8rem; }
.map-legend:not([open]) { border-radius: var(--r-pill); }
.map-legend summary { list-style: none; padding: 0; font-weight: 500; }
.map-legend summary::-webkit-details-marker { display: none; }
.map-legend summary::before { content: "?"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-inline-end: .35rem; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: .68rem; font-weight: 700; }
.map-legend .dot { width: 12px; height: 12px; }

/* ---------- מובייל ---------- */
@media (max-width: 760px) {
  .filterbar { padding: .55rem .7rem; }
  .locbox { flex-basis: 100%; max-width: none; }
  .chip.kit { padding: .3rem .7rem; font-size: .86rem; }
  .filterbtn span { display: none; }
  .filterbtn { padding: .3rem .7rem; }
  .panel { width: 100%; }
  .panel-head { justify-content: flex-start; padding: 1.3rem 1rem .35rem; }
  .panel-head .count { margin-top: 0; font-weight: 500; color: var(--ink-3); }
  .cats { padding-inline: 1rem; }
  /* במפה: שורות קומפקטיות עם תמונה בצד, כדי שייכנסו כמה עסקים בחצי מסך */
  .results { grid-template-columns: 1fr; gap: .6rem; padding-inline: .8rem; }
  .app:not(.list-view) .result { flex-direction: row; border-radius: var(--r-md); }
  .app:not(.list-view) .result .ph { width: 108px; aspect-ratio: auto; align-self: stretch; }
  .app:not(.list-view) .result .ph .kit { display: none; }
  .app:not(.list-view) .result .ph .dist { top: auto; bottom: .4rem; inset-inline-end: .4rem; font-size: .7rem; }
  .app:not(.list-view) .result .bd { padding: .6rem .75rem; flex: 1; }
  .app.list-view .mapwrap { display: none; }
  .map-tools { inset-block-end: auto; inset-block-start: .6rem; inset-inline-start: .6rem; align-items: flex-start; }
  .map-tools .missing-link { display: none; }
  .area-btn { top: 3.2rem; }
}

/* ==================================================================
   מסך הפתיחה: טקסט מול קולאז' של תמונות אוכל, ושורת קטגוריות שמובילה ישר למפה
   ================================================================== */
.welcome .step.hero { display: block; min-height: 0; text-align: start; padding: clamp(1.5rem, 5vw, 4rem) clamp(1.1rem, 5vw, 3rem) clamp(2rem, 6vw, 4rem); }
.welcome .step.hero > * { max-width: 1120px; margin-inline: auto; }
.hero-wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.hero-copy .hero-logo { margin: 0 0 1.4rem; display: block; height: clamp(44px, 5vw, 64px); width: auto; }
.hero-copy .hero-tagline { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.1rem; letter-spacing: -.02em; }
.welcome .step.hero .lede { margin-inline: 0; max-width: 46ch; font-size: 1.06rem; }
.welcome .step.hero .actions { justify-content: flex-start; margin-top: 1.6rem; }
.welcome .step.hero .btn.primary { min-height: 52px; padding-inline: 1.6rem; font-size: 1.05rem; }
.hero-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.5rem, 1.2vw, .9rem); }
.hero-photos .col { display: grid; gap: clamp(.5rem, 1.2vw, .9rem); align-content: start; }
.hero-photos .col:nth-child(2) { margin-top: 2.2rem; }
.hero-photos .col:nth-child(3) { margin-top: .9rem; }
.hero-photos figure { margin: 0; border-radius: clamp(16px, 2vw, 26px); overflow: hidden; aspect-ratio: 4 / 5; background: var(--pastel-peach); box-shadow: var(--shadow-md); }
.hero-photos figure.wide { aspect-ratio: 1; }
.hero-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-cats { margin-top: clamp(2rem, 5vw, 3.5rem); }
.hero-cats h2 { font-size: var(--fs-xl); margin: 0 0 .9rem; }
.hero-cats .cats { padding: .35rem .2rem .6rem; gap: clamp(.6rem, 1.6vw, 1.1rem); }
.hero-cats .cat { width: 92px; text-decoration: none; }
.hero-cats .cat-img { width: 84px; height: 84px; border-radius: 26px; padding: 5px; }
.hero-cats .cat-img img { border-radius: 21px; }
.hero-cats .cat-name { font-size: .84rem; color: var(--ink); }
.welcome .step.hero > .hero-points { max-width: 1120px; margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.hero-points li { background: var(--surface); box-shadow: var(--shadow-sm); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; }
@media (max-width: 860px) {
  .hero-wrap { grid-template-columns: 1fr; }
  .welcome .step.hero { text-align: center; }
  .hero-copy .hero-logo { margin-inline: auto; }
  .welcome .step.hero .lede { margin-inline: auto; }
  .welcome .step.hero .actions { justify-content: center; }
  .hero-photos { order: -1; max-width: 460px; margin-inline: auto; width: 100%; }
  .hero-photos .col:nth-child(2) { margin-top: 1.2rem; }
  .hero-photos .col:nth-child(3) { margin-top: .5rem; }
  .hero-photos figure:nth-child(2) { display: none; }
  .hero-cats { text-align: start; }
}

/* ==================================================================
   עמוד העסק: תמונת שער, כרטיס כותרת שעולה עליה, והכשרות במבט אחד
   ================================================================== */
.biz-cover { height: clamp(170px, 26vw, 300px); border-radius: var(--r-xl); overflow: hidden; background: var(--pastel-peach); position: relative; }
.biz-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biz-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,20,10,.28), transparent 55%); }
.biz-head { margin: -3.5rem clamp(.6rem, 3vw, 2rem) 1.75rem; border-radius: var(--r-xl); box-shadow: var(--shadow-md); z-index: 1; }
.biz-head::before { display: none; }
.biz-head .eyebrow:empty { display: none; }
.biz-kashrut { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; }
.biz-kashrut .badge { font-size: .86rem; padding: .3rem .8rem; text-decoration: none; }
.biz-kashrut .badge:hover { filter: brightness(.97); }
.biz-links { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.biz-links .btn.primary.small { min-height: 38px; padding-inline: 1.1rem; }
.biz-head .rating-card { box-shadow: none; border-radius: var(--r-lg); }
.cert { border-radius: var(--r-lg); }
.card { border-radius: var(--r-lg); }
@media (max-width: 760px) {
  .biz-cover { border-radius: var(--r-lg); margin-inline: -.25rem; }
  .biz-head { margin: -2.5rem .4rem 1.25rem; }
}

/* ---------- מצב כהה (רק בבחירה ידנית): התאמות לרכיבים החדשים ---------- */
:root.theme-dark .teu-cluster { border-color: var(--primary); }
:root.theme-dark .result .ph img, :root.theme-dark .cat-img img, :root.theme-dark .hero-photos img, :root.theme-dark .biz-cover img { filter: brightness(.9); }

/* גיליונות ומגירות נפתחים מתוך ‎.app, שהוא שכבה משלו מתחת לסרגל העליון. כשאחד מהם פתוח מרימים את כל השכבה,
   אחרת הסרגל העליון וכפתור הנגישות מכסים את ראש המגירה ואת הכפתורים שבתחתיתה */
.map-body .app:has(.sheet:not([hidden])) { z-index: 130; }
.app .sheet { z-index: 1000; }
/* כשרות שנבחרה: פסטל עם וי, במקום גוש שחור */
.chip.k.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.chip.k.on::before { content: "✓"; font-size: .8rem; }
:root.theme-dark .chip.k.on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }