/*
  ============================================================
  התמה הבהירה של גו לונדון
  ============================================================
  הקובץ הזה נטען אחרון בכל עמוד, ולכן הוא גובר על העיצוב הכהה
  שכתוב בתוך העמודים עצמם. כל שינוי צבע באתר נעשה כאן בלבד.

  עקרון העיצוב: הרקע בהיר אבל אף פעם לא אחיד. יש מתחתיו
  שכבת תצלום מטושטש ושלוש הילות צבע רכות, כדי שיהיה עומק
  בלי שהעין תרגיש רקע שטוח.
*/

:root {
  --bg:            #FAF9F6;
  --surface:       #ffffff;
  --surface-soft:  rgba(255,255,255,0.72);
  --ink:           #201f2b;
  --ink-soft:      #55596b;
  --ink-faint:     #858a9c;
  --line:          rgba(32,31,43,0.10);
  --line-soft:     rgba(32,31,43,0.06);
  --brand:         #DC2626;
  --brand-warm:    #EA580C;
  --navy:          #1E3A8A;
  --green:         #15803D;
  --shadow-sm:     0 1px 2px rgba(16,24,40,0.05), 0 4px 14px rgba(16,24,40,0.05);
  --shadow-md:     0 2px 4px rgba(16,24,40,0.05), 0 12px 30px rgba(16,24,40,0.08);
}

/* ---------- הבסיס, כולל שכבות העומק שמחליפות את הרקע האחיד ---------- */

html { background: var(--bg); }

body {
  background: transparent !important;
  color: var(--ink);
}

/* שכבה ראשונה: תצלום זעיר שנמתח על כל המסך ולכן נראה מטושטש לחלוטין */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background: url('images/bg-soft.jpg') center center / cover no-repeat;
  opacity: 0.26;
  filter: saturate(0.55) brightness(1.2);
  pointer-events: none;
}

/* שכבה שנייה: הילות צבע רכות בגווני המותג, ומעליהן הלבנה עדינה שמחזירה בהירות */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 52% at 8% 4%,   rgba(220,38,38,0.16), transparent 70%),
    radial-gradient(64% 50% at 95% 16%, rgba(30,58,138,0.18), transparent 70%),
    radial-gradient(85% 58% at 44% 106%, rgba(21,128,61,0.13), transparent 70%),
    linear-gradient(180deg, rgba(250,249,246,0.55) 0%, rgba(250,249,246,0.68) 48%, rgba(250,249,246,0.78) 100%);
}

/* ---------- גיליון התוכן ---------- */
/*
  התוכן יושב על משטח לבן מרחף במקום ישירות על הרקע.
  זה מה שמאפשר לרקע להיות עשיר ובעל מרקם בלי לפגוע כהוא זה בקריאות.
*/
.content, .seo-text {
  position: relative;
  z-index: 3;
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255,255,255,0.85);
  border-radius: 24px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 18px 48px rgba(16,24,40,0.10);
  margin-bottom: 56px;
  padding-inline: 40px !important;
  padding-bottom: 46px !important;
}
.content { margin-top: -40px !important; }
/* בעמודים אינטראקטיביים העטיפה נשארת שקופה, כי הכרטיסים שבתוכה כבר לבנים */
.wrap { position: relative; z-index: 3; }
.seo-text {
  padding-top: 34px !important;
  border-top: none !important;
  margin-top: 30px;
}
/* פירורי הלחם יושבים מעל הגיליון, לכן הם מקבלים רקע משלהם */
.breadcrumb {
  position: relative; z-index: 4;
  margin-top: -40px !important;
  margin-bottom: 14px;
  padding-top: 26px !important;
}
.breadcrumb + .content { margin-top: 0 !important; }

@media (max-width: 620px) {
  .content, .seo-text {
    border-radius: 18px;
    margin-inline: 12px;
    padding-inline: 20px !important;
  }
}

a { color: var(--navy); }

/* ---------- ברירת מחדל לכל הטקסט באתר ---------- */
/*
  הרבה עמודים מגדירים טקסט לבן על תגיות בלי מחלקה, ולכן צריך
  ברירת מחדל רחבה. החריגים, כלומר משטחי המותג הצבעוניים שבהם
  הטקסט חייב להישאר לבן, מוחזרים בסוף הקובץ.
*/
h1, h2, h3, h4, h5, h6 { color: var(--ink) !important; }
p, li, label, dt, dd, figcaption, blockquote, span, td, th { color: var(--ink-soft) !important; }
strong, b { color: var(--ink) !important; }
small { color: var(--ink-faint) !important; }

/* ---------- סרגל ניווט ---------- */

.navbar {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 6px 24px rgba(16,24,40,0.05);
}
/* על רקע כהה הלוגו הוצג במצב מיזוג. על רקע בהיר זה מוחק אותו. */
.logo-img { mix-blend-mode: normal !important; }
.logo-london { color: var(--ink) !important; }
.logo-slogan {
  color: var(--ink-faint) !important;
  border-right-color: var(--line) !important;
}
.back-btn {
  color: var(--ink-soft) !important;
  background: rgba(255,255,255,0.7);
  border-color: var(--line) !important;
}
.back-btn:hover {
  color: var(--ink) !important;
  background: #fff;
  border-color: rgba(32,31,43,0.22) !important;
  box-shadow: var(--shadow-sm);
}

/* ---------- כותרת העמוד ---------- */
/*
  יש כאן שני סוגי כותרות, והם מטופלים בנפרד לגמרי:

  1. כותרת עם תצלום, מסומנת במחלקה hero-photo. התצלום מוצג במלואו,
     ומעליו שכבה כהה אחידה שמבטיחה שהטקסט הלבן קריא מעל כל תמונה.

  2. כותרת בלי תצלום, כמו התקנון או הגילוי הנאות. שם נשארת שטיפת צבע
     בהירה עם טקסט כהה.

  ההפרדה הזאת קריטית. טקסט לבן שיוחל על כל הכותרות היה נעלם לגמרי
  בעמודים שאין בהם תמונה מאחוריו.
*/

/*
  עמודים בלי תצלום: שטיפת צבע רכה בגווני המותג במקום מלבן אחיד.
*/
.page-hero {
  border-bottom: none;
  padding-bottom: 104px !important;
  background:
    radial-gradient(82% 72% at 18% 0%,  rgba(220,38,38,0.16), transparent 70%),
    radial-gradient(74% 68% at 88% 8%,  rgba(30,58,138,0.16), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgba(21,128,61,0.10), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(250,249,246,0.15) 70%, rgba(250,249,246,0) 100%) !important;
}
.page-hero .tag {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid var(--line) !important;
  color: var(--brand) !important;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}
.page-hero h1 { color: var(--ink) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.7) !important; }
.page-hero p  { color: var(--ink-soft) !important; text-shadow: 0 1px 0 rgba(255,255,255,0.6) !important; }
.page-hero .meta { color: var(--ink-faint) !important; text-shadow: none !important; }

/* ---------- כותרת עם תצלום ---------- */
/*
  בגרסה הקודמת התצלום היה מטושטש בארבעה פיקסלים, מואר פי 1.3, ברמת
  שקיפות 0.62, ומעליו שכבת לבן ב-0.72. בפועל כמעט לא ראו אותו.
  כאן הוא מוצג כמו שהוא.
*/
.page-hero.hero-photo {
  padding-bottom: 82px !important;
  background: #0b1220 !important;         /* נראה רק בשבריר שנייה עד שהתצלום נטען */
}
.page-hero.hero-photo::before {
  filter: saturate(1.06) contrast(1.04) !important;
  transform: none !important;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
/*
  השכבה הכהה. היא אחידה במכוון ולא נמסה לשקיפות, כי תצלום בהיר
  בתחתית הכותרת היה בולע את שורת התיאור.
  החישוב: מעל תצלום לבן לגמרי, הצירוף הזה מוריד את הבהירות לרמה
  שנותנת ניגודיות של כ-5.5 מול טקסט לבן, כלומר מעל הסף הנדרש.
*/
.page-hero.hero-photo::after {
  background:
    linear-gradient(180deg, rgba(10,14,26,0.58) 0%, rgba(10,14,26,0.46) 40%, rgba(10,14,26,0.64) 100%),
    radial-gradient(82% 74% at 50% 52%, rgba(10,14,26,0.30), transparent 76%) !important;
}
.page-hero.hero-photo .tag {
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.34) !important;
  color: #fff !important;
  backdrop-filter: blur(8px);
  box-shadow: none;
}
.page-hero.hero-photo h1 {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(6,10,20,0.55) !important;
}
.page-hero.hero-photo p {
  color: rgba(255,255,255,0.90) !important;
  text-shadow: 0 1px 10px rgba(6,10,20,0.55) !important;
}
.page-hero.hero-photo .meta {
  color: rgba(255,255,255,0.78) !important;
  text-shadow: 0 1px 8px rgba(6,10,20,0.5) !important;
}
/*
  פירורי הלחם נמשכים ארבעים פיקסלים כלפי מעלה ולכן הם יושבים בתוך
  הרצועה התחתונה של הכותרת. כשהרצועה הזאת הפכה כהה, טקסט כהה עליה
  נעשה בלתי קריא. לכן בעמודים עם תצלום הם מקבלים צבע בהיר.
*/
/*
  הכלל הזה נמחק ולא הוחלף.

  הוא נכתב כשפירורי הלחם באמת ישבו על הרצועה הכהה של הכותרת, ומאז
  הפריסה השתנתה. מדידת פיקסלים בפועל בארבעה עמודים עם תצלום הראתה
  שהרקע מאחורי הטקסט הוא 234 עד 255, כלומר בהיר לחלוטין, ולכן טקסט
  לבן נתן יחס ניגודיות של 1.05 לאחד. הצבעים הכהים שמוגדרים בהמשך
  הקובץ נותנים 5.7 עד 6.9 לאחד על אותו רקע בדיוק.
*/

/* ---------- טיפוגרפיה של גוף העמוד ---------- */

.content h2, .content h3, .content h4,
.seo-text h2, .seo-text h3 { color: var(--ink) !important; }
.content p, .content li, .content ul, .content ol,
.seo-text p, .seo-text ul, .seo-text li { color: var(--ink-soft) !important; }
.content strong, .seo-text strong { color: var(--ink) !important; }

.content h2 { border-right-color: var(--brand) !important; }
.lead {
  color: var(--ink) !important;
  border-right-color: var(--brand) !important;
}

/*
  שם העמוד הנוכחי ומפרידי החץ קיבלו קודם ink-faint, שנותן 3.26 לאחד
  ואינו עומד בסף. שניהם עוברים ל-ink-soft. הקישורים מקבלים את הצבע
  הכהה המלא, גם כדי לעבור את הסף וגם כדי שיהיה הבדל נראה בין קישור
  לבין שם העמוד שאינו לחיץ.
*/
.breadcrumb { color: var(--ink-soft) !important; }
.breadcrumb a { color: var(--ink) !important; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- טבלאות ---------- */

.content table {
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.content th {
  color: var(--ink) !important;
  background: rgba(32,31,43,0.035) !important;
  border-bottom-color: var(--line) !important;
}
.content td {
  color: var(--ink-soft) !important;
  border-bottom-color: var(--line-soft) !important;
}
.content td:first-child { color: var(--ink) !important; }

/* ---------- כרטיסים, קופסאות ומשטחים ---------- */

.stat, .place, .day-card, .builder, .club-item, .num-item, .sibling {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-sm);
}
/*
  B10. ל-.stat-row לא היה כלל פריסה בשום קובץ שנטען בעמוד האטרקציות,
  ולכן שלושת הכרטיסים נערמו אנכית במקום לשבת זה לצד זה. הכלל מוגדר
  כאן ולא בעמוד עצמו, כדי שכל עמוד שמשתמש ברכיב יקבל אותה פריסה.
*/
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .stat-row { grid-template-columns: 1fr; }
}

.stat-num { color: var(--green) !important; }
/*
  התווית שמתחת למספר היתה בגוון החיוור ביותר, בגודל 12.5 ובמשקל רגיל,
  ויצאה בניגודיות של 3.44 מול הרקע הלבן. זה מתחת לסף הנגישות של 4.5.
  הגוון הרך נותן 6.94, והוא עדיין משני ביחס למספר עצמו.
  הכלל הזה משפיע על 52 עמודים.
*/
.stat-lbl { color: var(--ink-soft) !important; font-weight: 600; }

.place-name { color: var(--ink) !important; }
.place-addr { color: var(--ink-soft) !important; }
.place-kosher { color: var(--ink-faint) !important; }
.place-meta a { color: var(--green) !important; }
.badge-meat   { background: rgba(220,38,38,0.10) !important; color: #b42318 !important; }
.badge-dairy  { background: rgba(30,58,138,0.10) !important; color: #1e40af !important; }
.badge-bakery { background: rgba(180,120,10,0.13) !important; color: #92610a !important; }

.highlight-box {
  background: rgba(21,128,61,0.07) !important;
  border-color: rgba(21,128,61,0.22) !important;
  color: var(--ink-soft) !important;
  box-shadow: var(--shadow-sm);
}
.highlight-box strong { color: #15803D !important; }

.warning-box, .empty-note {
  background: rgba(234,88,12,0.07) !important;
  border-color: rgba(234,88,12,0.24) !important;
  color: var(--ink-soft) !important;
  box-shadow: var(--shadow-sm);
}
.warning-box strong, .empty-note strong { color: #c2410c !important; }

.closing {
  background: rgba(30,58,138,0.06) !important;
  border-color: rgba(30,58,138,0.18) !important;
  color: var(--ink-soft) !important;
}
.closing strong { color: var(--navy) !important; }

.map-cta {
  background: linear-gradient(135deg, rgba(21,128,61,0.09), rgba(15,118,110,0.06)) !important;
  border-color: rgba(21,128,61,0.25) !important;
  box-shadow: var(--shadow-sm);
}
.map-cta h3 { color: var(--ink) !important; }
.map-cta p { color: var(--ink-soft) !important; }

.siblings { border-top-color: var(--line) !important; }
.siblings h3 { color: var(--ink-faint) !important; }

/*
  B6. לרכיב היו כאן צבעים בלבד, והפריסה עצמה מעולם לא הוגדרה בקובץ
  שנטען בכל העמודים. התוצאה היתה קישורים כ-display:inline בלי ריווח,
  שנקראו כשורת טקסט אחת ארוכה בארבעת עמודי האב. הפריסה מוגדרת כאן
  פעם אחת, והמדיה קווירי בהמשך הקובץ ממשיך לדרוס את מספר העמודות.
*/
.sibling-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.sibling {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
}
.sibling { color: var(--ink-soft) !important; }
.sibling:hover {
  background: #fff !important;
  border-color: rgba(21,128,61,0.35) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-md);
}

.sources { border-top-color: var(--line) !important; }
.sources h3 { color: var(--ink-faint) !important; }
.sources a { color: var(--navy) !important; }

.back-cta a {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm);
}
.back-cta a:hover { background: #fff !important; box-shadow: var(--shadow-md); }

.updated { border-top-color: var(--line) !important; color: var(--ink-faint) !important; }

/* ---------- בלוק ההמלצות ---------- */

.aff-block-title { color: var(--ink-faint) !important; }
.aff-block-title::after { background: var(--line) !important; }
.aff-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-sm);
}
.aff-card:hover {
  background: #fff !important;
  border-color: rgba(234,88,12,0.4) !important;
  box-shadow: var(--shadow-md);
}
.aff-card-title { color: var(--ink) !important; }
.aff-card-desc { color: var(--ink-soft) !important; }
.aff-card-cta { color: #c2410c !important; }
.aff-card:hover .aff-card-cta { color: var(--brand-warm) !important; }
.aff-note { color: var(--ink-faint) !important; }
.aff-note a { color: var(--navy) !important; }

/* ---------- בונה המסלול ---------- */

.field-label { color: var(--ink) !important; }
.field-hint { color: var(--ink-faint) !important; }
.chip {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
  box-shadow: var(--shadow-sm);
}
.chip:hover { color: var(--ink) !important; border-color: rgba(234,88,12,0.45) !important; }
.chip[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--brand), var(--brand-warm)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(220,38,38,0.28);
}
.results-head h2 { color: var(--ink) !important; }
.results-sub { color: var(--ink-faint) !important; }
.mini-btn {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
  box-shadow: var(--shadow-sm);
}
.mini-btn:hover { background: #fff !important; color: var(--ink) !important; box-shadow: var(--shadow-md); }

/* שליחה בוואטסאפ היא הפעולה שהכי רוצים שתקרה בסוף הבנייה, ולכן היא
   הכפתור היחיד בסרגל שנשאר צבוע גם בערכת האור. הירוק הוא הירוק
   המזוהה של וואטסאפ, והטקסט הכהה עליו עומד ביחס ניגודיות של 8.7 ל 1. */
.mini-btn--wa {
  background: #25D366 !important;
  border-color: #1fbb59 !important;
  color: #06210f !important;
}
.mini-btn--wa:hover { background: #1fbb59 !important; color: #04170a !important; }

/* מפת היום בכרטיס. כחול ניווט, נפרד מהירוק של השיתוף ומהאדום של המותג. */
.day-map {
  background: rgba(37,99,235,0.07) !important;
  border-color: rgba(37,99,235,0.28) !important;
  color: #1d4ed8 !important;
}
.day-map:hover { background: rgba(37,99,235,0.13) !important; color: #1e40af !important; }
.day-title, .stop-name { color: var(--ink) !important; }
.day-meta { color: var(--ink-faint) !important; }
.stop { border-top-color: var(--line-soft) !important; }
.stop-en { color: var(--ink-faint) !important; }
.stop-tip { color: var(--ink-soft) !important; }
.stop-link { color: #c2410c !important; }
.stop-link:hover { color: var(--brand-warm) !important; }
.fact { background: rgba(32,31,43,0.05) !important; color: var(--ink-soft) !important; }
.fact.free { background: rgba(21,128,61,0.10) !important; color: #15803D !important; }
.fact.paid { background: rgba(234,88,12,0.11) !important; color: #c2410c !important; }
.fact.book { background: rgba(30,58,138,0.10) !important; color: #1e40af !important; }
.seo-text { border-top-color: var(--line) !important; }
.seo-text h2 { border-right-color: var(--brand) !important; }
.toast {
  background: var(--ink) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #fff !important;
  box-shadow: var(--shadow-md);
}

/* ---------- כדורגל ואטרקציות ---------- */

.club-item h3, .club-item h4, .num-item h4, .num-item h3 { color: var(--ink) !important; }
.club-item p, .num-item p { color: var(--ink-soft) !important; }
.num-item .free-badge { background: rgba(21,128,61,0.12) !important; color: #15803D !important; }
.num-item .free-badge.is-partial { background: rgba(180,83,9,0.14) !important; color: #B45309 !important; }
.num-item .paid-badge { background: rgba(29,78,216,0.1) !important; color: #1D4ED8 !important; }

/* ---------- הדפסה ---------- */

@media print {
  body::before, body::after { display: none !important; }
  html, body { background: #fff !important; }
}

/* ============================================================
   שאר עמודי האתר
   הבלוק הזה מכסה מחלקות שקיימות רק בעמודים מסוימים, כדי
   שלא יישאר אף משטח כהה באתר.
   ============================================================ */

/* כרטיסים ותיבות כלליים */
.channel-card, .stat-box, .contact-box, .email-box, .form-card,
.benefits, .benefit-item, .post-card, .result-card, .search-form,
.not-found, .empty-state, .add-form, .login-box, .posts-section,
.checkbox-group, .success-msg, .place-popup {
  background: rgba(255,255,255,0.92) !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
  box-shadow: var(--shadow-sm);
}
.post-card:hover, .result-card:hover, .channel-card:hover {
  background: #fff !important;
  box-shadow: var(--shadow-md);
}

/* כותרות וטקסט בתוכם */
.title, .post-card h3, .post-card h4, .result-title, .form-card h2,
.channel-card h3, .channel-card h4, .contact-box h3, .stat-box strong,
.benefit-item strong, .not-found h1, .not-found h2, .posts-section-title,
.cat-desc, .subtopics-title, .results-count, .members-count, .level-text {
  color: var(--ink) !important;
}
.sub, .subtitle, .form-sub, .form-note, .post-card-text, .post-card-desc,
.result-snippet, .post-date, .post-card-footer, .cat-breadcrumb,
.topbar-label, .empty-state, .form-group label {
  color: var(--ink-soft) !important;
}
.email-addr { color: var(--navy) !important; }

/* תגיות ותוויות */
.subtopic-tag, .level-badge, .count-badge, .perk {
  background: rgba(32,31,43,0.05) !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
}
.subtopic-tag:hover { background: rgba(220,38,38,0.08) !important; color: var(--brand) !important; }

/* שדות טופס */
.form-input, .form-select, .form-textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], textarea, select {
  background: #fff !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
input::placeholder, textarea::placeholder { color: var(--ink-faint) !important; }

/* כותרות עמוד ייעודיות */
.cat-hero, .search-hero {
  background:
    radial-gradient(82% 72% at 18% 0%, rgba(220,38,38,0.16), transparent 70%),
    radial-gradient(74% 68% at 88% 8%, rgba(30,58,138,0.16), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(250,249,246,0) 100%) !important;
}
.cat-hero h1, .search-hero h1 { color: var(--ink) !important; text-shadow: none !important; }
.cat-hero p, .search-hero p { color: var(--ink-soft) !important; text-shadow: none !important; }

/* מפת הכשרות */
.filter-btn {
  background: rgba(255,255,255,0.92) !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
  box-shadow: var(--shadow-sm);
}
/*
  B3. לכפתור הפעיל הוגדר טקסט לבן בלבד, בלי רקע, והוא ירש את הרקע
  הבהיר של .filter-btn שמעליו. התוצאה לבן על לבן: המשתמש ראה רק את
  האימוג'י בלי המילה, וזה בדיוק המצב בטעינה הראשונה עם המסנן "הכל".
  שני הווריאנטים הנוספים חסרו רקע מאותה סיבה.
*/
.filter-btn.active {
  background: var(--brand) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.filter-btn.active-shop    { background: #6D28D9 !important; border-color: transparent !important; }
.filter-btn.active-kashrus { background: #15803D !important; border-color: transparent !important; }
.filter-btn.active-shop, .filter-btn.active-shop *,
.filter-btn.active-kashrus, .filter-btn.active-kashrus * { color: #fff !important; }
.filter-btn.active-meat   { background: var(--brand) !important; border-color: transparent !important; }
.filter-btn.active-dairy  { background: var(--navy) !important;  border-color: transparent !important; }
.filter-btn.active-bakery { background: #92610a !important;      border-color: transparent !important; }
.locate-btn { background: #fff !important; color: var(--ink) !important; box-shadow: var(--shadow-md); }
.place-popup h3 { color: var(--ink) !important; }

/* כותרת תחתונה מוקטנת */
.mini-footer {
  background: rgba(255,255,255,0.7) !important;
  border-top: 1px solid var(--line) !important;
  color: var(--ink-faint) !important;
}

/* מסך הניהול הפנימי */
.admin-header, .login-screen {
  background: rgba(255,255,255,0.9) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.form-row { color: var(--ink-soft) !important; }

/* ============================================================
   חריגי הטקסט הלבן
   ============================================================
   הבלוק הזה חייב להישאר אחרון בקובץ. אלה המשטחים הצבעוניים
   של המותג, שבהם הטקסט הלבן הוא הנכון ולא צריך להתהפך לכהה.
*/

.btn-primary, .btn-primary *,
.btn-red, .btn-red *,
.build-btn, .build-btn *,
.submit-btn, .submit-btn *,
.save-btn, .save-btn *,
.download-btn, .download-btn *,
.logout-btn, .logout-btn *,
.chip[aria-pressed="true"], .chip[aria-pressed="true"] *,
/* B9. הכלל הגורף על span בשורה 113 צבע גם את המונה שבתוך המגש
   הכהה, ונתן 2.34 לאחד. הוספת המגש לרשימה הזאת מחזירה אותו ללבן. */
.gl-tray-pill, .gl-tray-pill *,
.filter-btn.active, .filter-btn.active *,
/* שלושת הווריאנטים האלה קיבלו רקע צבעוני אבל ירשו טקסט כהה,
   כלומר 1.3 עד 1.5 לאחד אחרי החלפת מסנן. */
.filter-btn.active-meat, .filter-btn.active-meat *,
.filter-btn.active-dairy, .filter-btn.active-dairy *,
.filter-btn.active-bakery, .filter-btn.active-bakery *,
.day-num, .num, .aff-card-icon,
.map-cta a, .map-cta a *,
.toast, .toast *,
.nav-cta, .nav-cta *,
.popup-waze, .popup-waze *,
.locate-btn i,
.splash-title, .splash-title * {
  color: #fff !important;
}

/* המספר בכרטיסי הסטטיסטיקה נשאר ירוק, והקישורים נשארים בצבע שלהם */
.stat-num { color: var(--green) !important; }
.place-meta a { color: var(--green) !important; }
.aff-card-cta { color: #c2410c !important; }
.stop-link { color: #c2410c !important; }
.email-addr { color: var(--navy) !important; }
.logo-go { color: var(--brand) !important; }
.page-hero .tag { color: var(--brand) !important; }
.highlight-box strong { color: #15803D !important; }
.warning-box strong, .empty-note strong { color: #c2410c !important; }
.closing strong { color: var(--navy) !important; }
.fact.free { color: #15803D !important; }
.fact.paid { color: #c2410c !important; }
.fact.book { color: #1e40af !important; }
.badge-meat { color: #b42318 !important; }
.badge-dairy { color: #1e40af !important; }
.badge-bakery { color: #92610a !important; }

/* ============================================================
   קטעי דף הבית שהיו כהים
   ============================================================
   בדף הבית היו שלושה פסים כהים: קטע המסלולים, רקע הכתבות
   והכותרת התחתונה. כאן הם הופכים לבהירים עם מרקם, לפי אותו
   עיקרון של כל האתר.
*/

.routes-banner {
  background:
    radial-gradient(70% 60% at 10% 0%,  rgba(220,38,38,0.13), transparent 70%),
    radial-gradient(66% 58% at 92% 10%, rgba(30,58,138,0.14), transparent 70%),
    linear-gradient(180deg, #F4F2ED 0%, #FAF9F6 100%) !important;
  border-block: 1px solid var(--line);
}
.routes-header h2 { color: var(--ink) !important; }
.routes-header p { color: var(--ink-soft) !important; }

/*
  שלושת עקרונות התכנון, ומתחתם הקריאה לבונה המסלול.
  הקטע הזה החליף רשימת מסלולים מוכנים שכל הקישורים בה היו מתים,
  וגם ייתר את קטע הכלים שהופיע אחריו וחזר על אותו תוכן.
*/
.start-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}
.start-point {
  position: relative;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 22px 22px;
  box-shadow: var(--shadow-sm);
}
.start-point-num {
  position: absolute;
  top: -14px;
  inset-inline-start: 22px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, #DC2626, #EA580C);
  color: #fff !important;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(220,38,38,0.3);
}
.start-point h4 {
  color: var(--ink) !important;
  font-size: 17px;
  font-weight: 900;
  margin: 6px 0 9px;
  line-height: 1.35;
}
.start-point p {
  color: var(--ink-soft) !important;
  font-size: 14.5px;
  line-height: 1.75;
  margin: 0;
}

.planner-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 26px;
  background: linear-gradient(135deg, rgba(220,38,38,0.07), rgba(124,58,237,0.07)), #fff;
  border: 1px solid rgba(220,38,38,0.26);
  border-radius: 22px;
  padding: 32px 34px;
  text-decoration: none !important;
  box-shadow: var(--shadow-md);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.planner-cta:hover {
  transform: translateY(-3px);
  border-color: rgba(220,38,38,0.45);
  box-shadow: var(--shadow-lg, 0 18px 44px rgba(16,24,40,0.14));
}
.planner-cta-icon {
  width: 66px;
  height: 66px;
  border-radius: 18px;
  background: linear-gradient(135deg, #DC2626, #EA580C);
  color: #fff !important;
  font-size: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(220,38,38,0.32);
}
.planner-cta-text { display: block; }
.planner-cta-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .5px;
  color: var(--brand) !important;
  background: rgba(220,38,38,0.1);
  padding: 4px 11px;
  border-radius: 50px;
  margin-bottom: 9px;
}
.planner-cta-title {
  display: block;
  color: var(--ink) !important;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: 8px;
}
.planner-cta-desc {
  display: block;
  color: var(--ink-soft) !important;
  font-size: 15px;
  line-height: 1.75;
  max-width: 62ch;
}
.planner-cta-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, #DC2626, #EA580C);
  color: #fff !important;
  font-size: 15.5px;
  font-weight: 900;
  padding: 15px 26px;
  border-radius: 13px;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(220,38,38,0.28);
}

@media (max-width: 900px) {
  .start-points { grid-template-columns: 1fr; gap: 22px; }
  .planner-cta {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    gap: 18px;
    padding: 30px 22px;
  }
  .planner-cta-btn { width: 100%; justify-content: center; }
}

/*
  קישוטי הרקע החלקיים הוסרו.
  היו כאן שני תצלומים שכיסו כחצי מרוחב הקטע ונמוגו באמצע, מה שנראה
  כמו טעות רינדור ולא כמו עיצוב. הרקע של האתר ממילא נושא מרקם משלו,
  ולכן הקטעים האלה נשארים נקיים.
*/
.articles { background: transparent !important; }
.articles::before,
.categories::before { display: none !important; }
.categories { background: transparent !important; }

/* הכותרת התחתונה */
.footer {
  background:
    radial-gradient(80% 70% at 12% 0%, rgba(220,38,38,0.09), transparent 70%),
    radial-gradient(70% 65% at 90% 8%, rgba(30,58,138,0.10), transparent 70%),
    linear-gradient(180deg, #F4F2ED 0%, #EFEDE7 100%) !important;
  color: var(--ink-soft) !important;
  border-top: 1px solid var(--line);
}
.footer h4, .footer h3, .footer strong { color: var(--ink) !important; }
.footer a, .footer li, .footer p, .footer span { color: var(--ink-soft) !important; }
.footer a:hover { color: var(--brand) !important; }
.footer-brand p { color: var(--ink-faint) !important; }
.footer-bottom { border-top: 1px solid var(--line) !important; }
.footer-bottom p, .footer-bottom a { color: var(--ink-faint) !important; }
.social-links a {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
}
.social-links a:hover { background: #fff !important; color: var(--brand) !important; box-shadow: var(--shadow-sm); }

/* הפס העליון עם השעה, מזג האוויר ושער הלירה */
.topbar {
  background: linear-gradient(180deg, #F1EFE9 0%, #EAE7DF 100%) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
}
.topbar-item, .topbar-item span { color: var(--ink-soft) !important; }
.topbar-item i { color: var(--ink-faint) !important; }
.topbar-label { color: var(--ink-faint) !important; }
.topbar-divider { background: var(--line) !important; }
.gbp-symbol, .gbp-eq { color: var(--ink) !important; }
#london-time, #weather-temp, #gbp-rate { color: var(--ink) !important; font-weight: 700; }

/* ---------- כותרת דף הבית ---------- */
/*
  כאן התצלום נשאר חי ובוהק, והטקסט מעליו לבן במכוון.
  לכן צריך להחזיר את הצבעים המקוריים אחרי הכלל הגורף.
*/
.hero-title, .hero-title * { color: #fff !important; }
.hero-highlight { color: #f97316 !important; }
.hero-sub, .hero-sub * { color: rgba(255,255,255,0.92) !important; }
.hero-badge, .hero-badge * { color: #fff !important; }
.hero-stats, .hero-stats * { color: #fff !important; }
.hero-title { text-shadow: 0 3px 26px rgba(0,0,0,0.5); }
.hero-sub { text-shadow: 0 2px 16px rgba(0,0,0,0.55); }
.hero-badge {
  background: rgba(0,0,0,0.34) !important;
  border-color: rgba(255,255,255,0.35) !important;
  backdrop-filter: blur(8px);
}

/* ---------- שאריות אחרונות ---------- */

/* קטע הקהילה בדף הבית */
.community-banner {
  background:
    radial-gradient(72% 62% at 12% 0%, rgba(220,38,38,0.12), transparent 70%),
    radial-gradient(68% 60% at 90% 8%, rgba(30,58,138,0.13), transparent 70%),
    linear-gradient(180deg, #F4F2ED 0%, #FAF9F6 100%) !important;
  border-block: 1px solid var(--line);
}
.community-banner h2, .community-banner h3 { color: var(--ink) !important; }
.community-banner p, .community-banner li, .community-banner span { color: var(--ink-soft) !important; }

/* סרגל הכלים של מפת הכשרות */
.toolbar {
  background: rgba(255,255,255,0.92) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 4px 20px rgba(16,24,40,0.06);
}
.toolbar-title { color: var(--ink) !important; }
.toolbar-title span { color: var(--brand) !important; }
.count-badge, .count-badge strong { color: var(--ink) !important; }

/* קישור הירוק בסרגל הניווט, גוון כהה יותר כדי שייקרא על רקע לבן */
.nav-links a[href="kosher-map.html"] { color: #15803D !important; }
.post-card-footer a, .post-card a { color: var(--navy) !important; }

/* ============================================================
   כרטיסים עם תמונת רקע
   ============================================================
   בכרטיסים האלה הטקסט יושב ישירות על התצלום. הכלל הגורף שהופך
   טקסט לכהה היה הופך אותו לבלתי קריא כאן, ולכן מחזירים לבן.
   בנוסף, התצלום עצמו מואר ושכבת הכהות ממוקדת רק מתחת לטקסט,
   כדי שהתמונה תיראה ותהיה נעימה ולא מוכהה לגמרי.
*/

/*
  ============================================================
  כרטיסי הקטגוריות, מבנה חדש
  ============================================================
  קודם הטקסט ישב על גבי התצלום, ולכן היה חייב מעליו שכבת כהות
  כדי להיות קריא. זה מה שהחשיך את התמונות.

  עכשיו התצלום תופס את החלק העליון של הכרטיס בלי שום שכבה מעליו,
  והטקסט יורד אליו מתחת על משטח לבן. התוצאה: תמונה בהירה לגמרי,
  וטקסט כהה שקריא באופן מובטח. האמוג׳י הופך לתג מרחף שמחבר בין השניים.
*/

.cat-card {
  background: #fff !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.cat-card:hover { box-shadow: var(--shadow-md); border-color: rgba(220,38,38,0.28) !important; }
.cat-card::before, .cat-card::after { display: none !important; }

/* התצלום, בלי שום שכבת צבע מעליו */
.cat-card-bg {
  position: relative !important;
  inset: auto !important;
  width: 100%;
  flex: 0 0 auto;
  height: 158px;
  display: block !important;
  overflow: hidden;
  background: none !important;
  filter: saturate(1.06) brightness(1.03);
  z-index: 0 !important;
}
.cat-card-bg > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.cat-card--large .cat-card-bg { height: 190px; }
.cat-card--med .cat-card-bg   { height: 140px; }

.cat-card > *:not(.cat-card-bg) {
  position: relative;
  z-index: 2;
  padding-inline: 22px;
}

/* האמוג׳י כתג מרחף על התפר בין התצלום לטקסט */
.cat-card .cat-emoji {
  width: 54px; height: 54px;
  min-width: 54px;
  margin-block: -32px 8px;
  margin-inline: 22px auto;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(16,24,40,0.14);
  font-size: 26px !important;
  line-height: 1;
}
.cat-card--large .cat-emoji { width: 60px; height: 60px; min-width: 60px; font-size: 30px !important; }

.cat-card h3 {
  color: var(--ink) !important;
  text-shadow: none !important;
  margin-bottom: 8px;
}
.cat-card li, .cat-card .cat-sub, .cat-card p, .cat-card span {
  color: var(--ink-soft) !important;
  text-shadow: none !important;
}
.cat-card .cat-link {
  color: var(--brand) !important;
  font-weight: 800;
  text-shadow: none !important;
  margin-top: auto;
  padding-bottom: 20px;
}
.cat-card:hover .cat-link { background: transparent !important; }

/* תגית הקטגוריה על כרטיסי הכתבות, כדי שתישאר קריאה על תצלום בהיר */
.article-category-tag {
  background: rgba(12,14,22,0.62) !important;
  backdrop-filter: blur(6px);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.22);
}

/* ============================================================
   הרשתות החברתיות
   ============================================================
   שלוש אריחים גדולים בקטע הקהילה, כל אחד בצבע הרשת שלו, וגם
   שדרוג של האייקונים הקטנים בכותרת התחתונה.
*/

.social-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.social-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.social-tile::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--social); transition: width .2s ease;
}
.social-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--social);
  text-decoration: none;
}
.social-tile:hover::before { width: 8px; }
.social-tile i {
  font-size: 26px;
  color: var(--social) !important;
  margin-bottom: 6px;
}
.social-tile .social-name {
  font-size: 17px; font-weight: 900; color: var(--ink) !important;
}
.social-tile .social-sub {
  font-size: 13.5px; color: var(--ink-soft) !important; line-height: 1.5;
}
.social-fb { --social: #1877F2; }
.social-ig { --social: #E1306C; }
.social-tt { --social: #111318; }

/* האייקונים הקטנים בכותרת התחתונה */
.social-links { gap: 12px !important; }
.social-links a {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 17px;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-soft) !important;
  transition: all .2s ease;
}
.social-links a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.social-links a[aria-label="פייסבוק"]:hover  { color: #1877F2 !important; border-color: #1877F2 !important; }
.social-links a[aria-label="אינסטגרם"]:hover { color: #E1306C !important; border-color: #E1306C !important; }
.social-links a[aria-label="טיקטוק"]:hover   { color: #111318 !important; border-color: #111318 !important; }

/* כרטיסי הקטגוריות במובייל: שניים בשורה, ולכן פס התצלום נמוך יותר */
@media (max-width: 640px) {
  .cat-card-bg               { height: 118px; }
  .cat-card--large .cat-card-bg { height: 134px; }
  .cat-card--med .cat-card-bg   { height: 110px; }
  .cat-card > *:not(.cat-card-bg) { padding-inline: 15px; }
  .cat-card .cat-emoji {
    width: 42px; height: 42px; min-width: 42px;
    font-size: 20px !important;
    border-radius: 13px;
    margin-block: -24px 6px;
    margin-inline: 15px auto;
  }
  .cat-card--large .cat-emoji { width: 46px; height: 46px; min-width: 46px; font-size: 22px !important; }
  .cat-card h3 { font-size: 15.5px !important; margin-bottom: 6px; }
  .cat-card .cat-link { font-size: 13px; padding-bottom: 15px; }
  .cat-card--large, .cat-card--med { min-height: 0 !important; }
}

/* ============================================================
   כרטיסי המדריכים
   ============================================================
   מצב המיזוג הזה נועד לשלב את התצלום עם שכבת צבע כהה. השכבה
   כבר הוסרה, אבל המיזוג עצמו נשאר והמשיך להכהות את התמונה.
*/
.article-img {
  background-blend-mode: normal !important;
  filter: saturate(1.08) brightness(1.05) !important;
}

/* ============================================================
   בונה המסלול, הרכיבים החדשים
   ============================================================
   הרכיבים האלה נכתבו בעמוד עצמו בצבעי טקסט בהירים, מה שמתאים לרקע כהה.
   באתר הבהיר הם נעלמו, לבן על לבן. כאן נקבע המראה שהמשתמש רואה בפועל.
*/

.mode-tabs { background: rgba(32,31,43,0.04) !important; border-color: var(--line) !important; }
.mode-tab { color: var(--ink-soft) !important; }
.mode-tab:hover { background: rgba(32,31,43,0.06) !important; color: var(--ink) !important; }
.mode-tab.active { background: linear-gradient(135deg, #DC2626, #EA580C) !important; }
.mode-tab.active, .mode-tab.active * { color: #fff !important; }
.manual-intro { color: var(--ink-soft) !important; }

.palette { background: #fff !important; border-color: var(--line) !important; box-shadow: var(--shadow-sm); }
.pal-search {
  background: rgba(32,31,43,0.04) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.pal-search::placeholder { color: var(--ink-faint) !important; }
.pal-status { color: var(--ink-faint) !important; }
.pal-clear { color: var(--brand) !important; }
.pal-clear:hover { color: var(--brand-warm) !important; }
.pal-empty {
  background: rgba(32,31,43,0.03) !important;
  border-color: rgba(32,31,43,0.14) !important;
  color: var(--ink-soft) !important;
}

.area-btn { background: #fff !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }
.area-btn:hover { background: rgba(32,31,43,0.04) !important; color: var(--ink) !important; }
.area-btn.is-on {
  background: rgba(32,31,43,0.05) !important;
  color: var(--ink) !important;
  border-color: var(--area-color) !important;
}
.area-count { color: var(--ink-faint) !important; }

.cube { background: #fff !important; border-color: var(--line) !important; box-shadow: var(--shadow-sm); }
.cube:hover { border-color: rgba(234,88,12,0.45) !important; box-shadow: var(--shadow-md); }
.cube--used { opacity: .72; }
.cube-emoji { background: rgba(32,31,43,0.04) !important; border-color: var(--line) !important; }
.cube-name { color: var(--ink) !important; }
.cube-meta { color: var(--ink-faint) !important; }
.cube-desc { color: var(--ink-soft) !important; }
.cube-badge { background: rgba(32,31,43,0.06) !important; color: var(--ink-soft) !important; }
.cube-badge.is-free { background: rgba(21,128,61,0.11) !important; color: #15803D !important; }
.cube-badge.is-paid { background: rgba(234,88,12,0.12) !important; color: #c2410c !important; }
.cube-badge.is-used { background: rgba(30,58,138,0.10) !important; color: #1e40af !important; }
.cube-btn { background: rgba(32,31,43,0.05) !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }
.cube-btn:hover { background: rgba(32,31,43,0.09) !important; color: var(--ink) !important; }
.cube-btn--add { background: linear-gradient(135deg, #DC2626, #EA580C) !important; border-color: transparent !important; }
.cube-btn--book { background: rgba(30,58,138,0.09) !important; border-color: rgba(30,58,138,0.28) !important; color: #1e40af !important; }
.cube-btn--book:hover { background: rgba(30,58,138,0.16) !important; color: #1e3a8a !important; }
.cube-btn--add, .cube-btn--add * { color: #fff !important; }

.board-summary { color: var(--ink-soft) !important; }
.board-day { border-color: var(--line) !important; }
.board-day.is-active { border-color: rgba(234,88,12,0.5) !important; }
.board-day.drop-on { border-color: #15803D !important; background: rgba(21,128,61,0.05) !important; }
.day-btn { background: rgba(32,31,43,0.05) !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }
.day-btn:hover { background: rgba(32,31,43,0.09) !important; color: var(--ink) !important; }
.day-btn.is-on { background: linear-gradient(135deg, #DC2626, #EA580C) !important; border-color: transparent !important; }
.day-btn.is-on, .day-btn.is-on * { color: #fff !important; }
.day-btn--danger, .mini-btn--danger { color: #b91c1c !important; }
.day-warn {
  background: rgba(234,88,12,0.08) !important;
  border-color: rgba(234,88,12,0.3) !important;
  color: #9a3412 !important;
}

.stop-desc { color: var(--ink-soft) !important; }
.stop-btn { background: rgba(32,31,43,0.05) !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }
.stop-btn:hover { background: rgba(32,31,43,0.09) !important; color: var(--ink) !important; }
.stop-btn--book {
  background: rgba(30,58,138,0.08) !important;
  border-color: rgba(30,58,138,0.28) !important;
  color: #1e40af !important;
}
.stop-btn--book:hover { background: rgba(30,58,138,0.14) !important; color: #1e3a8a !important; }
.ctl { background: rgba(32,31,43,0.05) !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }
.ctl:hover:not(:disabled) { background: rgba(32,31,43,0.1) !important; color: var(--ink) !important; }
.ctl--danger { color: #b91c1c !important; }
.ctl-sel { background: #fff !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }

.versions { background: rgba(32,31,43,0.03) !important; border-color: var(--line) !important; }
.versions-label { color: var(--ink-faint) !important; }
.ver-chip { background: #fff !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }
.ver-chip:hover { background: rgba(32,31,43,0.06) !important; color: var(--ink) !important; }
.ver-chip.active { background: linear-gradient(135deg, #DC2626, #EA580C) !important; border-color: transparent !important; }
.ver-chip.active, .ver-chip.active * { color: #fff !important; }
.compare { background: rgba(32,31,43,0.03) !important; border-color: var(--line) !important; }
.cmp-head { color: var(--ink) !important; }
.cmp-col { background: #fff !important; box-shadow: var(--shadow-sm); }
.cmp-col.cmp-add { border-inline-start-color: #15803D !important; }
.cmp-col.cmp-rem { border-inline-start-color: #c2410c !important; }
.cmp-col.cmp-same { border-inline-start-color: rgba(32,31,43,0.2) !important; }
.cmp-col-title { color: var(--ink-faint) !important; }
.cmp-list li { color: var(--ink-soft) !important; }
.cmp-none { color: var(--ink-faint) !important; }

.info-panel { background: #fff !important; border-color: var(--line) !important; }
.info-close { background: rgba(32,31,43,0.06) !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }
.info-close:hover { background: rgba(32,31,43,0.12) !important; color: var(--ink) !important; }
.info-area { color: #c2410c !important; }
.info-title { color: var(--ink) !important; }
.info-en { color: var(--ink-faint) !important; }
.info-desc { color: var(--ink-soft) !important; }
.info-tip {
  background: rgba(234,88,12,0.07) !important;
  border-color: rgba(234,88,12,0.24) !important;
  color: var(--ink-soft) !important;
}
.info-btn { background: rgba(32,31,43,0.05) !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }
.info-btn:hover { background: rgba(32,31,43,0.09) !important; color: var(--ink) !important; }
.info-btn--primary { background: linear-gradient(135deg, #DC2626, #EA580C) !important; border-color: transparent !important; }
.info-btn--primary, .info-btn--primary * { color: #fff !important; }
.info-btn--book {
  background: rgba(30,58,138,0.08) !important;
  border-color: rgba(30,58,138,0.28) !important;
  color: #1e40af !important;
}
.info-btn--book:hover { background: rgba(30,58,138,0.14) !important; color: #1e3a8a !important; }

/* חותמת "עודכן לאחרונה" בראש עמודי העוגן, אות עדכניות לגולש ולגוגל */
.freshness {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-faint) !important;
  margin-bottom: 18px;
}
.freshness i { color: #15803D; }

/* ============================================================
   פריטים לחיצים עם מידע מורחב
   ============================================================
   פריטי רשימה שמסומנים data-place מקבלים סימן חזותי שהם לחיצים,
   ומעבר עכבר שמזמין ללחוץ. הרכיב עצמו, החלון שנפתח, מנוהל
   על ידי place-info.js.
*/
[data-place] {
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
[data-place]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(220,38,38,0.3) !important;
}
[data-place]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
[data-place]::after {
  content: "פרטים נוספים \f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: var(--brand);
  opacity: 0;
  transition: opacity .15s ease;
  position: absolute;
  bottom: 10px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  direction: rtl;
}
[data-place]:hover::after, [data-place]:focus-visible::after { opacity: 1; }
.num-item[data-place] { padding-bottom: 34px; }


/* אשכול החודשים, צבעי הערכה הבהירה */
.m-card { background: #fff !important; border-color: var(--line) !important; box-shadow: var(--shadow-sm); }
.m-card:hover { border-color: rgba(234,88,12,0.45) !important; box-shadow: var(--shadow-md); }
.m-card-name { color: var(--ink) !important; }
.m-card-sub { color: var(--ink-soft) !important; }
.m-card-stats { color: var(--ink-faint) !important; }
.m-fact { background: #fff !important; border-color: var(--line) !important; box-shadow: var(--shadow-sm); }
.m-fact-num { color: var(--brand) !important; }
.m-fact-lbl { color: var(--ink-soft) !important; }
.m-list li { color: var(--ink-soft) !important; }
.m-list li::before { color: #15803D !important; }
.m-nav a { background: #fff !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }
.m-nav a:hover { background: rgba(32,31,43,0.05) !important; color: var(--ink) !important; }
/*
  B4. אותו דפוס כמו B3: טקסט לבן בלי רקע, והכפתור ירש את הרקע הלבן
  של .m-nav a. בכל שנים עשר עמודי החודשים שם החודש הנוכחי נעלם.
  הגרדיאנט זהה לזה שכבר מוגדר בעמודים עצמם.
*/
.m-nav a.is-on {
  /*
    צבע מלא ולא גרדיאנט. הגרדיאנט האדום לכתום נותן 4.83 בקצה האדום
    אבל רק 3.56 בקצה הכתום, ושם הטקסט יושב בפועל. הצבע המלא נותן
    4.83 לכל אורך הצ'יפ, והוא אותו צבע שמקבל המסנן הפעיל במפת
    הכשרות, כך ששני מצבי הפעיל באתר נראים עכשיו זהים.
  */
  background: var(--brand) !important;
  border-color: transparent !important;
}
.m-nav a.is-on, .m-nav a.is-on * { color: #fff !important; }
.m-prevnext a { background: #fff !important; border-color: var(--line) !important; color: var(--ink-soft) !important; }
.m-prevnext a:hover { background: rgba(32,31,43,0.05) !important; color: var(--ink) !important; }

/* באנר "לונדון לפי חודשים" בדף הבית */
.month-banner { padding: 10px 0 46px; }
.month-banner-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
  background: linear-gradient(135deg, rgba(30,58,138,0.08), rgba(21,128,61,0.07)), #fff;
  border: 1px solid rgba(30,58,138,0.22);
  border-radius: 22px; padding: 30px 34px;
  box-shadow: var(--shadow-md);
}
.month-banner-text { flex: 1 1 320px; }
.month-badge {
  display: inline-block; font-size: 11.5px; font-weight: 900; letter-spacing: .5px;
  color: #1e40af !important; background: rgba(30,58,138,0.12);
  padding: 4px 12px; border-radius: 50px; margin-bottom: 10px;
}
.month-banner h2 { color: var(--ink) !important; font-size: clamp(21px, 3vw, 27px); font-weight: 900; margin-bottom: 9px; }
.month-banner p { color: var(--ink-soft) !important; font-size: 15px; line-height: 1.75; margin: 0; max-width: 62ch; }
.month-banner-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #1E3A8A, #2563EB);
  color: #fff !important; font-size: 15.5px; font-weight: 900;
  padding: 15px 26px; border-radius: 13px; text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(30,58,138,0.28);
}
.month-banner-btn:hover { filter: brightness(1.08); }
@media (max-width: 760px) {
  .month-banner-inner { padding: 26px 20px; }
  .month-banner-btn { width: 100%; justify-content: center; }
}

/* חיפוש בתוך עמוד קטגוריה */
.cat-search-input {
  background: #fff !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm);
}
.cat-search-input::placeholder { color: var(--ink-faint) !important; }
.cat-search-icon { color: var(--ink-faint) !important; }
.cat-search-clear { background: rgba(32,31,43,0.07) !important; color: var(--ink-soft) !important; }
.cat-search-clear:hover { background: rgba(32,31,43,0.14) !important; color: var(--ink) !important; }
.cat-search-status { color: var(--ink-soft) !important; }

/* שלוש נקודות היתרון בראש דף הבית */
/*
  התצלום יושב למעלה בלי שום שכבת כהות מעליו, והטקסט מתחתיו על לבן.
  זה מה שמונע את התחושה של תמונה חשוכה שראינו בכרטיסי הקטגוריות.
*/
.why-us { padding: 46px 0 8px; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.why-card {
  display: flex; flex-direction: column;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none !important;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.why-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(16,24,40,0.15); border-color: rgba(234,88,12,0.4) !important; }

.why-photo {
  position: relative; display: block; height: 168px;
  overflow: hidden;
  transition: transform .35s ease;
}
.why-photo > picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.why-photo > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.why-card:hover .why-photo { transform: scale(1.04); }
.why-chip {
  z-index: 1;
  position: absolute; top: 12px; inset-inline-start: 12px;
  background: rgba(255,255,255,0.94);
  color: var(--ink) !important;
  font-size: 11.5px; font-weight: 900;
  padding: 6px 12px; border-radius: 50px;
  box-shadow: 0 2px 10px rgba(16,24,40,0.16);
  backdrop-filter: blur(4px);
}

.why-body { display: flex; flex-direction: column; gap: 9px; padding: 0 24px 24px; flex: 1; }
.why-icon {
  width: 50px; height: 50px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #DC2626, #EA580C);
  color: #fff !important; font-size: 20px;
  margin-top: -25px; position: relative; z-index: 2;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(220,38,38,0.3);
}
.why-icon--green { background: linear-gradient(135deg, #15803D, #22A055); box-shadow: 0 6px 18px rgba(21,128,61,0.3); }
.why-icon--blue  { background: linear-gradient(135deg, #1E3A8A, #2563EB); box-shadow: 0 6px 18px rgba(30,58,138,0.3); }

.why-title { display: block; font-size: 19px; font-weight: 900; color: var(--ink) !important; line-height: 1.3; }
.why-text { display: block; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft) !important; }
.why-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 800; color: var(--brand) !important; }
.why-card:hover .why-link { color: var(--brand-warm) !important; }

@media (max-width: 620px) { .why-us { padding: 34px 0 4px; } .why-photo { height: 148px; } .why-body { padding: 0 20px 20px; } }

/* חיפוש כלל אתרי */
.search-sub { color: var(--ink-soft) !important; }
.sf-btn { background: #fff !important; border-color: var(--line) !important; color: var(--ink-soft) !important; box-shadow: var(--shadow-sm); }
.sf-btn:hover { background: rgba(32,31,43,0.05) !important; color: var(--ink) !important; }
.sf-btn.is-on { background: linear-gradient(135deg,#DC2626,#EA580C) !important; border-color: transparent !important; }
.sf-btn.is-on, .sf-btn.is-on * { color: #fff !important; }
.sf-count { color: inherit !important; }
.result-type { background: rgba(30,58,138,0.10) !important; color: #1e40af !important; }

/* שלוש שורות קצרות בראש העמוד, מתחת לכותרת */
.hero-points {
  list-style: none; padding: 0;
  margin: 20px auto 4px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  max-width: 780px;
}
.hero-points li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700;
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.hero-points i {
  font-size: 10px;
  width: 20px; height: 20px; flex: 0 0 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  color: #fff !important;
  backdrop-filter: blur(4px);
}
@media (max-width: 640px) {
  .hero-points { gap: 8px 0; flex-direction: column; align-items: center; margin-top: 16px; }
  .hero-points li { font-size: 13.5px; }
}

/* חמש הטעויות, גרסה מצומצמת שיושבת אחרי המדריכים */
.mistakes { padding: 8px 0 54px; }
.mistakes-head { text-align: center; margin-bottom: 22px; }
.mistakes-tag {
  display: inline-block; font-size: 11.5px; font-weight: 900; letter-spacing: .4px;
  color: #c2410c !important; background: rgba(234,88,12,0.11);
  padding: 4px 12px; border-radius: 50px; margin-bottom: 10px;
}
.mistakes h2 { color: var(--ink) !important; font-size: clamp(20px, 2.6vw, 25px); font-weight: 900; margin: 0; }
.mistakes-list {
  max-width: 780px; margin: 0 auto; padding: 0; list-style: none;
  counter-reset: mk;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.mistakes-list li {
  counter-increment: mk;
  position: relative;
  padding: 15px 62px 15px 20px;
  font-size: 14.5px; line-height: 1.7;
  color: var(--ink-soft) !important;
  border-bottom: 1px solid var(--line-soft);
}
.mistakes-list li:last-child { border-bottom: none; }
.mistakes-list li::before {
  content: counter(mk);
  position: absolute; inset-inline-start: 20px; top: 15px;
  width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(234,88,12,0.12); color: #c2410c !important;
  font-size: 13px; font-weight: 900;
}
.mistakes-list strong { color: var(--ink) !important; }
.mistakes-cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  max-width: 780px; margin: 14px auto 0;
  font-size: 14px; font-weight: 800;
  color: var(--brand) !important;
  padding: 12px 18px; border-radius: 12px;
  border: 1px dashed rgba(220,38,38,0.35);
  text-decoration: none !important;
}
.mistakes-cta:hover { background: rgba(220,38,38,0.05); color: var(--brand-warm) !important; }
@media (max-width: 620px) {
  .mistakes-list li { padding: 14px 54px 14px 16px; font-size: 14px; }
  .mistakes-cta { font-size: 13.5px; }
}

/* במובייל הקוביות הראשיות קטנות מעט, כדי שלא יתפסו מסך שלם כל אחת */
@media (max-width: 620px) {
  .why-grid { gap: 14px; }
  .why-photo { height: 118px; }
  .why-body { padding: 0 18px 18px; gap: 7px; }
  .why-icon { width: 42px; height: 42px; font-size: 17px; margin-top: -21px; border-width: 3px; }
  .why-title { font-size: 17px; }
  .why-text { font-size: 13.5px; line-height: 1.65; }
  .why-link { font-size: 13.5px; }
  .why-chip { font-size: 10.5px; padding: 5px 10px; }
}

/* תיבת ההסכמה בטופס העדכונים */
/*
  קטע העדכונים יושב על רקע בהיר, ולכן הטקסט כאן כהה.
  בגרסה קודמת הוא נכתב בלבן והיה בלתי נראה לחלוטין.
*/
.nl-consent {
  flex-basis: 100%;
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 12px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--ink-soft) !important;
  cursor: pointer;
}
.nl-consent input {
  width: 17px; height: 17px; margin-top: 1px; flex: 0 0 17px;
  accent-color: #DC2626; cursor: pointer;
}
.nl-consent span { color: var(--ink-soft) !important; }
.nl-consent:hover span { color: var(--ink) !important; }
@media (max-width: 620px) { .nl-consent { font-size: 12px; } }

/* הבאנר המרחף של מפת הכשרות, כולו לחיץ */
/*
  קודם רק כפתור "פתח" הקטן היה קישור, ומי שלחץ על הטקסט או על האייקון
  לא קיבל כלום. עכשיו כל הבאנר הוא קישור אחד.

  שימו לב לנקודה שהכשילה את הניסיון הראשון: העיצוב המקורי הגדיר לעטיפה
  display:contents, כלומר היא לא ייצרה תיבה משלה. קישור בלי תיבה אי אפשר
  ללחוץ עליו. לכן כאן היא מקבלת תיבה אמיתית שמתנהגת בדיוק כמו השורה
  שהייתה שם קודם.
*/
a.kosher-float-mobile {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-decoration: none !important;
  cursor: pointer;
}
a.kosher-float-desktop { text-decoration: none !important; cursor: pointer; }
a.kosher-float-mobile:hover,
a.kosher-float-desktop:hover { text-decoration: none !important; }
a.kosher-float-mobile:active { transform: scale(0.985); }

/* הכפתורים שבתוך הקישור הם קישוט בלבד, הלחיצה שייכת לבאנר כולו */
.kosher-float-mobile .kosher-float-btn,
.kosher-float-desktop .kfd-btn { pointer-events: none; }

/* כפתור הסגירה חייב להישאר מעל שטח הלחיצה של הבאנר */
.kosher-float-close { position: relative; z-index: 5; }

@media (min-width: 700px) {
  a.kosher-float-mobile { display: none !important; }
  a.kosher-float-desktop { display: flex; flex-direction: column; align-items: stretch; }
}

/* ---------- קוביות "מה כדאי לקרוא" ---------- */
/*
  הקוביות האלה היו div ולא קישור, ולכן לחיצה עליהן לא עשתה כלום.
  עכשיו הן קישור מלא, וגם נראות ככזה.
*/
a.fit {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-color: var(--line) !important;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  text-decoration: none !important;
}
a.fit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(220,38,38,0.45) !important;
}
a.fit .fit-head { color: var(--ink) !important; }
a.fit p { color: var(--ink-soft) !important; flex: 1; }
.fit-go {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; font-size: 13px; font-weight: 800;
  color: var(--brand) !important;
}
a.fit:hover .fit-go i { transform: translateX(-3px); }
.fit-go i { transition: transform .16s ease; }

/*
  לעומתן, "למי זה הכי מתאים" בעמודי השכונות מתאר את העמוד שכבר פתוח
  ולכן אינו ניווט. הן מעוצבות אחרת במכוון, בלי מסגרת מלאה ובלי צל,
  כדי שלא ייקראו ככפתור שאינו מגיב.
*/
.fitlist-info .fit {
  background: rgba(32,31,43,0.028);
  border: none !important;
  border-right: 3px solid rgba(220,38,38,0.5) !important;
  border-radius: 0 12px 12px 0;
  box-shadow: none;
}

/* ---------- רוחב עמוד המדריך במסך רחב ---------- */
/*
  התוכן היה נעול על 800 פיקסלים גם במסך שולחני רחב, ולכן נשארו שוליים
  ריקים ענקיים משני הצדדים והעמוד נמתח לאורך בלי סיבה.
  כאן המכל מתרחב, אבל עמודת הטקסט עצמה נשארת ברוחב קריא.
  בלי הגבלה על הטקסט שורה היתה נמתחת לרוחב כל המסך וזה קשה לקריאה.
  הרשתות, שהן ויזואליות ולא טקסט רץ, מקבלות את כל הרוחב ולכן
  מציגות יותר עמודות והעמוד מתקצר.
*/
@media (min-width: 1024px) {
  .content { max-width: 1140px !important; }

  /* עמודת הטקסט נשארת קריאה, וצמודה לימין כי הכיוון מימין לשמאל */
  .content > p,
  .content > ul,
  .content > ol,
  .content > h2,
  .content > h3,
  .content > .lead,
  .content > .highlight-box,
  .content > .warning-box,
  .content > .sources {
    max-width: 900px;
    margin-inline-end: 0;
  }

  /* הרשתות מנצלות את הרוחב המלא ומציגות יותר עמודות */
  .content .cix-grid { grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); }
  .content .sibling-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
}

/* ---------- קרדיט הבנייה בתחתית ---------- */
/*
  מכוון להיות נוכח אך שקט, ברמת בולטות נמוכה מקישורי התקנון.
  הצבע נבחר כדי לעבור את סף הניגודיות ולא להיבלע ברקע הכהה.
*/
.footer-bottom .build-credit {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.42) !important;
  letter-spacing: 0.2px;
}
.footer-bottom .build-credit-name {
  direction: ltr;
  display: inline-block;
  font-weight: 700;
  color: rgba(255,255,255,0.62) !important;
}

/* ---------- רשימת אטרקציות מוטמעת בתוך עמוד ---------- */
/*
  משמש להטמעת רשימה אמיתית של אטרקציות בתוך עמודים כמו קטגוריות ילדים
  וכדורגל, במקום לשלוח החוצה לספק חיצוני. כל כרטיס לחיץ ופותח את אותו
  חלון מידע עשיר שיש בעמוד האטרקציות המלא, כולל תיאור, וידאו ומחיר
  אמיתי כשיש. attr-list.js מטעין את התוכן, place-info.js מפעיל את הלחיצה.
*/
.attr-list { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 30px; }
.attr-item {
  display: flex; gap: 15px; align-items: flex-start; cursor: pointer;
  background: rgba(32,31,43,0.03); border: 1px solid rgba(32,31,43,0.1);
  border-radius: 14px; padding: 16px 18px; transition: background .15s, border-color .15s;
}
.attr-item:hover { background: rgba(32,31,43,0.06); border-color: rgba(32,31,43,0.18); }
.attr-item .attr-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, #DC2626, #EA580C);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; color: #fff !important; font-size: 13.5px;
}
.attr-item h4 { font-size: 15.5px; font-weight: 800; color: var(--ink) !important; margin-bottom: 3px; }
.attr-item p { font-size: 13.5px; color: var(--ink-soft) !important; margin: 0; line-height: 1.6; }
.attr-free-badge {
  display: inline-block; background: rgba(21,128,61,0.14); color: #15803D !important;
  font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 6px; margin-inline-start: 7px;
}
.attr-list-loading { font-size: 13.5px; color: var(--ink-faint); padding: 10px 2px; }

/* ---------- כפתור קפיצה למאמרים ופוסטים, מיד אחרי השער ---------- */
/*
  עמודי האשכול הראשיים היו מתחילים בהסבר ארוך, והרשימה המעוצבת של
  המאמרים והפוסטים ישבה רק בתחתית העמוד, בלתי נראית כמעט. הכפתור
  הזה נותן קיצור דרך מיידי, בלי לוותר על ההסבר המפורט שנשאר במקומו.
*/
.jump-articles {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  max-width: 760px; margin: 22px auto 4px; padding: 14px 22px;
  background: #fff; border: 1px solid rgba(32,31,43,0.12); border-radius: 50px;
  box-shadow: 0 3px 14px rgba(16,24,40,0.07); font-weight: 800; font-size: 14.5px;
  color: var(--ink) !important; text-decoration: none !important;
}
.jump-articles:hover { box-shadow: 0 5px 18px rgba(16,24,40,0.1); border-color: rgba(220,38,38,0.3); }
.jump-articles i.fa-arrow-down { color: #DC2626; }
@media (max-width: 560px) {
  .jump-articles { margin: 16px 16px 2px; font-size: 13.5px; padding: 12px 16px; }
}

/* ---------- קישור מקום בתוך טקסט חופשי ---------- */
/*
  auto-link-places.js מזהה שמות של אטרקציות, קבוצות כדורגל, אירועים
  ומסעדות כשרות בתוך פרוזה חופשית במאמרים ובפוסטים, ועוטף אותם
  בסימון הזה. קו תחתי מקווקו ולא צבע לינק רגיל, כדי שהקורא יבין
  שזה מידע נוסף באתר עצמו, לא קישור יציאה.
*/
.gl-place-link {
  cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: rgba(220,38,38,0.55); text-underline-offset: 3px;
  text-decoration-thickness: 1.5px; transition: text-decoration-color .12s ease;
}
.gl-place-link:hover { text-decoration-color: #DC2626; }

/* ============================================================
   שכבת התכנון בדף הבית
   ============================================================
   שני שינויים בלבד, ושניהם משרתים את אותה מטרה: שהנכנס יבין
   בשניות הראשונות שכאן מתכננים טיול ולא רק קוראים על לונדון.
*/

/* כותרת מעל שלושת הכלים. צמודה יותר מכותרת סעיף רגילה, כי הכרטיסים מתחתיה */
.section-header--tools { margin-bottom: 26px; }
.section-header--tools h2 { font-size: clamp(24px, 3.2vw, 34px); }
.section-header--tools p { font-size: 16px; }

/* כפתור משני ירוק בגיבור, בצבע של מפת הכשרות */
.btn-outline--green {
  border-color: rgba(74,222,128,0.55) !important;
  color: #bbf7d0 !important;
}
.btn-outline--green:hover {
  background: rgba(74,222,128,0.14) !important;
  border-color: #4ade80 !important;
  color: #fff !important;
}

/* ---------- מתי אתם טסים, שנים עשר החודשים ---------- */
.months-strip { padding: 40px 0 6px; }
.months-strip .section-header { margin-bottom: 24px; }
.months-strip .section-header h2 { font-size: clamp(24px, 3.2vw, 34px); }
.months-strip .section-header p { font-size: 16px; }

.ms-scroll { margin-inline: -4px; padding: 4px; }
.ms-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.ms-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 14px 8px;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow-sm);
  text-decoration: none !important;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ms-card:hover {
  transform: translateY(-3px);
  border-color: rgba(30,58,138,0.38);
  box-shadow: 0 10px 26px rgba(16,24,40,0.12);
}
.ms-emoji { font-size: 20px; line-height: 1; }
.ms-name  { font-size: 14.5px; font-weight: 900; color: var(--ink) !important; }
.ms-temp  { font-size: 11.5px; font-weight: 600; color: var(--ink-faint) !important; }

.ms-all {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px; font-size: 14.5px; font-weight: 800;
  color: var(--brand) !important;
}
.ms-all:hover { color: var(--brand-warm) !important; }

@media (max-width: 900px) {
  .ms-grid { grid-template-columns: repeat(4, 1fr); }
}
/*
  במובייל הכרטיסים עוברים לגלילה אופקית במקום להצטמצם לרוחב בלתי קריא.
  scroll-snap גורם לכל כרטיס לעצור במקום, וזה מה שהופך את זה לנוח באצבע.
*/
@media (max-width: 620px) {
  .months-strip { padding: 30px 0 4px; }
  .ms-scroll {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -18px;
    padding: 4px 18px 10px;
  }
  .ms-scroll::-webkit-scrollbar { display: none; }
  .ms-grid {
    grid-template-columns: repeat(12, 92px);
    gap: 9px;
  }
  .ms-card { scroll-snap-align: start; padding: 13px 6px; }
}

/* ============================================================
   לוח המחוונים "לפני שטסים"
   ============================================================
   העמוד הזה לא מוסיף שום תוכן חדש. הוא מרכז מדריכים שכבר קיימים
   באתר ומסדר אותם לפי סדר הזמנים האמיתי של מי שסוגר טיול.
   הצבעים כאן הם אותם טוקנים של כל האתר, בלי שום גוון חדש.
*/
.byf-num { color: var(--brand) !important; }
.byf-grp h2 { color: var(--ink) !important; }
.byf-sub { color: var(--ink-soft) !important; }

.byf-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-sm);
}
.byf-card:hover {
  border-color: rgba(234,88,12,0.42) !important;
  box-shadow: 0 12px 30px rgba(16,24,40,0.13);
}
.byf-ico {
  background: linear-gradient(135deg, #DC2626, #EA580C);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(220,38,38,0.24);
}
/* שלב שתיים הוא שלב המסמכים, ולכן כחול, ושלב שלוש הוא הנחיתה, ולכן ירוק */
.byf-grp:nth-of-type(2) .byf-ico { background: linear-gradient(135deg, #1E3A8A, #2563EB); box-shadow: 0 4px 12px rgba(30,58,138,0.24); }
.byf-grp:nth-of-type(3) .byf-ico { background: linear-gradient(135deg, #15803D, #22A055); box-shadow: 0 4px 12px rgba(21,128,61,0.24); }

.byf-title { color: var(--ink) !important; }
.byf-desc  { color: var(--ink-soft) !important; }
.byf-flag {
  background: rgba(220,38,38,0.11);
  color: var(--brand) !important;
}

.byf-next { border-top-color: var(--line) !important; }
.byf-next h2 { color: var(--ink) !important; }
.byf-next-card {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s, transform .16s;
}
.byf-next-card:hover { border-color: rgba(30,58,138,0.4) !important; transform: translateY(-2px); }
.byf-next-card i { color: var(--brand) !important; }

/*
  פירורי הלחם באתר מקבלים margin-top שלילי כדי להיתחב מתחת לכרטיס
  התוכן המעוגל של עמודי המאמרים. בלוח המחוונים אין כרטיס כזה, ולכן
  המשיכה כלפי מעלה הניחה אותם על גבי תצלום הכותרת ובלי קריאות.
  ההחזרה מוגבלת לעמוד הזה בלבד ולא נוגעת באף עמוד אחר.
*/
.byf-page .breadcrumb {
  margin-top: 0 !important;
  padding-top: 18px !important;
}

/* ============================================================
   מה חדש בלונדון עכשיו
   ============================================================
   שני רכיבים: כרטיסי המקטע בדף הבית, ואייטם מלא בעמוד היומי
   ובארכיון. אותם טוקנים של כל האתר, בלי גוון חדש.
*/

/* ---------- הכרטיסים בדף הבית ---------- */
.whats-new { padding: 44px 0 8px; }
.wnc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.wnc {
  display: flex; flex-direction: column;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none !important;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.wnc:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16,24,40,0.14); border-color: rgba(220,38,38,0.35); }
.wnc-img { display: block; height: 142px; background-size: cover; background-position: center; }
.wnc-body { display: flex; flex-direction: column; gap: 7px; padding: 15px 17px 17px; flex: 1; }
.wnc-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11.5px; font-weight: 800; color: var(--ink-faint) !important; }
.wnc-cat {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(220,38,38,0.1); color: var(--brand) !important;
  padding: 3px 10px; border-radius: 50px;
}
.wnc-title { display: block; font-size: 16px; font-weight: 900; line-height: 1.35; color: var(--ink) !important; }
.wnc-sum { display: block; font-size: 13.5px; line-height: 1.62; color: var(--ink-soft) !important; }
.wnc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 800; color: var(--brand) !important; }
.wnc:hover .wnc-go { color: var(--brand-warm) !important; }
.wnc-all { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 14.5px; font-weight: 800; color: var(--brand) !important; }
.wnc-all:hover { color: var(--brand-warm) !important; }

/* ---------- העמוד היומי והארכיון ---------- */
.wn-page .wn-hero {
  background: linear-gradient(135deg, rgba(220,38,38,0.07), rgba(30,58,138,0.07));
  border-bottom: 1px solid var(--line);
}
.wn-page .wn-hero .tag { background: rgba(220,38,38,0.11); color: var(--brand) !important; }
.wn-page .wn-hero h1 { color: var(--ink) !important; }
.wn-page .wn-hero p { color: var(--ink-soft) !important; }
.wn-daylink { color: var(--brand) !important; }
.wn-daysep { color: var(--ink) !important; border-bottom-color: rgba(220,38,38,0.3) !important; }

.wn-item {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-sm);
}
.wn-meta { color: var(--ink-faint) !important; }
.wn-cat { background: rgba(220,38,38,0.1); color: var(--brand) !important; }
.wn-item h2, .wn-item h3 { color: var(--ink) !important; }
.wn-item p, .wn-item li { color: var(--ink-soft) !important; }
.wn-item strong { color: var(--ink) !important; }
.wn-note {
  background: rgba(30,58,138,0.055);
  border-color: rgba(30,58,138,0.2) !important;
  color: var(--ink-soft) !important;
}
.wn-note strong { color: var(--navy) !important; }
.wn-more { border-top-color: var(--line) !important; }
.wn-more h4 { color: var(--ink-faint) !important; }
.wn-more a {
  background: rgba(32,31,43,0.02) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
.wn-more a:hover { border-color: rgba(30,58,138,0.4) !important; }
.wn-more a i { color: var(--brand) !important; }
.wn-src { color: var(--ink-faint) !important; }
.wn-src a { color: var(--navy) !important; }
.wn-full {
  background: linear-gradient(135deg, #DC2626, #EA580C);
  color: #fff !important;
}
.wn-full:hover { opacity: .92; }

@media (max-width: 620px) {
  .whats-new { padding: 32px 0 4px; }
  .wnc-img { height: 158px; }
}

/* ============================================================
   מפת הכשרות: חיבור למדריכים, ופילטרים צפופים יותר בטלפון
   ============================================================ */
.km-guides {
  max-width: 900px; margin: 0 auto; padding: 30px 20px 44px;
}
.km-guides h2 { font-size: 21px; font-weight: 900; color: var(--ink) !important; margin-bottom: 6px; }
.km-guides > p { font-size: 14.5px; color: var(--ink-soft) !important; margin-bottom: 16px; }
.km-guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.km-guides-grid a {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface) !important; border: 1px solid var(--line);
  border-radius: 13px; padding: 14px 16px;
  font-size: 14.5px; font-weight: 800; color: var(--ink) !important;
  box-shadow: var(--shadow-sm); text-decoration: none !important;
  transition: transform .16s, border-color .16s;
}
.km-guides-grid a:hover { transform: translateY(-2px); border-color: rgba(21,128,61,0.42) !important; }
.km-guides-grid a i { color: var(--green) !important; font-size: 15px; }
.km-guides-all {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  font-size: 14.5px; font-weight: 800; color: var(--brand) !important;
}
.km-guides-all:hover { color: var(--brand-warm) !important; }

/*
  בטלפון שורות הפילטרים תפסו כ-200 פיקסל לפני שהמפה נראתה בכלל.
  הכיווץ הוא בריווח ובגודל בלבד, בלי לשנות את המבנה ובלי להסתיר כלום.
*/
@media (max-width: 620px) {
  .km-guides { padding: 24px 16px 34px; }
  .km-guides-grid { grid-template-columns: 1fr; }
  /*
    ניסיתי לכווץ כאן את שורות הפילטרים כדי שהמפה תיראה מוקדם יותר
    בטלפון. הרווח היה שני פיקסלים בלבד, ובתמורה גובה הכפתורים ירד
    לכ-33 פיקסל, מתחת למה שנוח ללחוץ עליו באצבע. זו עסקה גרועה,
    ולכן הכיווץ הוסר והמצב הקיים נשאר.
  */
}


/*
  שורת כלים משנית מתחת לשלושת כרטיסי הכלים בדף הבית.
  הצ'קליסט ולפני שטסים הם כלים אמיתיים אבל אין להם תצלום כרטיס,
  ולכן הם מופיעים כשורת קישורים ולא כמשבצת רביעית שתשבור את הרשת.
*/
.why-more { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 0; }
.why-more a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 700; color: #201f2b !important;
  background: rgba(255,255,255,.72); border: 1px solid rgba(32,31,43,.12);
  border-radius: 11px; padding: 11px 17px;
  text-decoration: none !important; transition: background .15s, color .15s, border-color .15s;
}
.why-more a:hover { background: #201f2b; color: #fff !important; border-color: #201f2b; }
.why-more a i { color: #DC2626; font-size: 13px; }
.why-more a:hover i { color: #fff; }