/* ===== Element 133309: CSS – Page Elements ===== */
/* =========================================
   1. LOCAL FONT DEFINITIONS
   ========================================= */
/* Assistant — גוף הטקסט. WOFF2 בחלוקה לתת-קבוצות לפי כתב,
   כך שהדפדפן מוריד רק את מה שהוא באמת מציג: עברית 7KB במקום TTF של 99KB.
   הקבצים הם הבנייה הרשמית של Google Fonts, זהה למקור שהיה כאן קודם. */
@font-face {
    font-family: 'Assistant';
    src: url('https://www.francophilesanonymes.com/wp-content/uploads/2026/01/assistant-hebrew-wght-normal.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face {
    font-family: 'Assistant';
    src: url('https://www.francophilesanonymes.com/wp-content/uploads/2026/01/assistant-latin-wght-normal.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Assistant';
    src: url('https://www.francophilesanonymes.com/wp-content/uploads/2026/01/assistant-latin-ext-wght-normal.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* Heebo-Medium (משקל 500) הוסר: ה-@font-face של Heebo-Variable בסעיף 41.1
   מכסה את טווח 100–900 ומנצח אותו בבחירת הדפדפן, כך שזו היתה הורדה מבוזבזת של 33KB. */
/* =========================================
   2. VARIABLES & GLOBAL SETTINGS
   ========================================= */
:root {
    --color-link: #4F64B0;
    --color-link-hover: #15399B;
    --bg-quote: #FFFFFF;
    --accent-red: #CF3834;
    --sb-bg: #ffffff;
    --sb-border: #D7D7D6;
    --color-text-main: #1A1800;
    --font-heading: 'Heebo', sans-serif;
    --font-body: 'Assistant', sans-serif;
    /* z-index scale */
    --z-header: 800;
    --z-sticky: 801;
    --z-sticky-footer: 803;
    --zvi-sticky-h: 62px;
    --z-toc-dropdown: 802;
    --z-drawer-overlay: 9999998;
    --z-drawer: 9999999;
    /* additional semantic colors */
    --color-text-muted: #555555;
    --color-text-faint: #6e6e6e; /* היה #888888 (3.54:1, נכשל) — כעת 5.10:1, עובר AA */
    --color-text-faint-2: #666666;
    --color-gray-mid: #444444;
    --color-gray-faint: #b9b9b9;
    --color-facebook: #1877F2;
    --color-whatsapp: #25D366;
    --fs-body: clamp(1.125rem, 2vw + 0.5rem, 1.25rem);
    --fs-h1:   clamp(2.5rem, 5vw + 1rem, 3.8125rem);
    --fs-h2:   clamp(2rem, 4vw + 0.5rem, 3rem);
    --fs-h3:   clamp(1.75rem, 3vw + 0.5rem, 2.4375rem);
    --fs-h4:   clamp(1.5rem, 2vw + 0.5rem, 1.9375rem);
    /* card system */
    --card-bg-color: var(--sb-bg);
    --card-border-radius: 16px;
    --card-shadow-base: 0 4px 15px rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 12px 25px rgba(0, 0, 0, 0.12);
    --card-transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    --card-padding: 24px;
    /* button system */
    --btn-padding-y: 10px;
    --btn-padding-x: 24px;
    --btn-font-weight: 500;
    --btn-border-radius: 8px;
    --btn-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    /* callout system */
    --callout-bg: #F4F4F4;
    --callout-radius: 12px;
    --callout-padding: 30px;
    --callout-shadow: 0 4px 15px rgba(0,0,0,0.03);
    /* traveler tips system */
    --tt-primary: var(--color-link);
    --tt-primary-hover: var(--color-link-hover);
    --tt-secondary: var(--accent-red);
    --tt-bg-soft: #f4f8fc;
    --tt-text-main: var(--color-text-main);
    --tt-text-muted: #666666;
    --tt-border: var(--sb-border);
    --tt-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    --tt-card-shadow-hover: 0 12px 25px rgba(0, 0, 0, 0.1);
}
/* כיווניות מבוססת שפה - החלה על ה-HTML בלבד */
html:root[lang^="he"], body[dir="rtl"] {
    direction: rtl;
}
html:root:not([lang^="he"]) {
    direction: ltr;
}
html, body {
    overflow-x: clip;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    text-align: start;
}
@media screen and (max-width: 782px) {
    html:root { margin-top: 0; }
}
/* =========================================
   3. GLOBAL TYPOGRAPHY (FLUID)
   ========================================= */
body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--color-text-main);
}
p, li, label, input, textarea, blockquote, figcaption, div, span, a, button {
    font-family: inherit;
}
p {
    font-size: var(--fs-body);
    margin-block-end: 1.5em;
    line-height: 1.8;
    max-width: 100%;
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, .entry-title {
    font-family: var(--font-heading);
    text-align: start;
    font-weight: 600;
    color: var(--color-text-main);
    margin-block-start: 1.5em;
    margin-block-end: 0.5em;
    line-height: 1.25;
}
h1, .entry-title { font-size: var(--fs-h1); color: var(--color-link); margin-block-start: 0; font-weight: 700; }
h2 { font-size: var(--fs-h2); color: var(--accent-red); margin-block-start: 2.5em; padding-bottom: 10px; border-bottom: 2px solid rgba(79, 100, 176, 0.1); }
h3 { font-size: var(--fs-h3); color: var(--color-link); margin-block-start: 2em; }
h4, h5, h6 { font-size: var(--fs-h4); }
/* תמונות וקישורים */
.wp-block-image img, .entry-content img, .entry-content figure img {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
p a {
    color: var(--color-link);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid rgba(79, 100, 176, 0.3);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
p a:hover {
    color: var(--color-link-hover);
    border-bottom-color: var(--color-link-hover);
    background-color: rgba(79, 100, 176, 0.1);
}
figcaption, .wp-caption-text, .wp-block-image figcaption {
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: 8px;
    color: #1A1800;
    text-align: center;
}
ul, ol { margin-top: 20px; margin-bottom: 20px; }
/* =========================================
   4. LAYOUT
   ========================================= */
body #site-header, body .site-header { display: none; }
.main-container { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px 20px; box-sizing: border-box; }
.zvi-content-body { max-width: 800px; margin: 0 auto; }
/* =========================================
   12. CONTENT WRAPPER & MARGINS
   ========================================= */
@media (min-width: 769px) { body.single .entry-content, body.single-post .entry-content, .inside-article { padding-right: 4px; padding-left: 4px; width: 100%; max-width: 820px; margin-right: auto; margin-left: auto; box-sizing: border-box; } }
@media (min-width: 1025px) and (max-width: 1250px) { body.single .entry-content, body.single-post .entry-content, .inside-article { max-width: 640px; } }
@media (max-width: 768px) {
    body.single .entry-content, body.single-post .entry-content, .inside-article, .grid-container { padding-right: 8px; padding-left: 8px; box-sizing: border-box; width: 100%; }
    .zvi-flex-grid { padding-right: 0; padding-left: 0; }
}
/* =========================================
   34. CLASSIC EDITOR EMBEDS & IMAGES OVERFLOW
   ========================================= */
.entry-content iframe,
.entry-content embed,
.entry-content object,
.entry-content video {
    max-width: 100% !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="vimeo"] {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
}
.wp-caption, .wp-caption img { max-width: 100% !important; height: auto !important; }
/* =========================================================
   פרנקופילים אנונימיים — CUSTOM CSS דף הבית (עיצוב חדש 2026)
   כל העיצובים מבוססי CLASSES בלבד. אין INLINE CSS ב-HTML.
   פלטת צבעים: כחול/לבן/אדום (כמו דגל צרפת) + שחור ואפור בהיר כצבעים משלימים.
   --fa-purple/--fa-purple-dark מוצמדים כעת ל-var(--color-link)/var(--color-link-hover)
   הקיימים באתר, כך שעמוד הבית ודפי התוכן חולקים אותו כחול בדיוק — אין יותר
   שתי גוונים מקבילים. --fa-amber נשאר בכוונה כחריג יחיד לכוכבי דירוג בלבד
   (מוסכמה עולמית לדירוגים; אם תרצה גם את זה מוחלף לגמרי — שורה אחת להחלפה).
   ========================================================= */
/* ---------- משתני צבע וטיפוגרפיה ---------- */
:root {
    --fa-purple: var(--color-link);        /* #4F64B0 — כחול המותג, לא סגול נפרד */
    --fa-purple-dark: var(--color-link-hover); /* #15399B */
    --fa-purple-soft: #eef1fa;              /* גרסה בהירה של אותו כחול, לרקעי תגית */
    --fa-amber: #f5a623;                    /* חריג מכוון: זהב לכוכבי דירוג בלבד */
    --fa-ink: var(--color-text-main);       /* #1A1800 — אותו "שחור" טקסט כמו בשאר האתר */
    --fa-text: #4b515e;
    --fa-text-muted: #565c69;
    --fa-text-light: #6b7180;
    --fa-text-lighter: #5f6575; /* היה #7a808d (3.96:1 על לבן, 3.73:1 על אפור — נכשל) — כעת 5.83:1 / 5.49:1 */
    --fa-card-border: #ecedf4;
    --fa-bg-gray: #f7f8fc;
    --fa-bg-gray-border: #eceef6;
    --fa-radius-lg: 22px;
    --fa-radius-md: 16px;
    --fa-radius-sm: 12px;
    --fa-shadow-card: 0 6px 20px rgba(20, 22, 40, .05);
    --fa-shadow-soft: 0 8px 24px rgba(20, 22, 40, .06);
    --fa-shadow-strong: 0 16px 44px rgba(20, 22, 40, .08);
    --fa-shadow-purple: 0 8px 20px rgba(79, 100, 176, .28);
}
/* ---------- איפוסים בסיסיים בעמוד הבית ---------- */
body.home .fa-home { color: var(--fa-text); }
.fa-home * { box-sizing: border-box; }
.fa-home h1, .fa-home h2, .fa-home h3, .fa-home h4 { margin: 0; color: var(--fa-ink); }
.fa-home p { margin: 0; }
.fa-home a { color: var(--fa-purple); text-decoration: none; }
.fa-home a:hover { color: var(--fa-purple-dark); }
/* ---------- חוק קבוע: רקע כחול/סגול = טקסט לבן ----------
   כל כותרת (h1-h4) בתוך סקשן עם רקע כחול/סגול חייבת להיות לבנה,
   ללא יוצא מן הכלל. ה-!important מבטיח שהחוק ינצח כל התנגשות
   עם עיצוב ברירת המחדל של התבנית/וורדפרס. */
.fa-banner-purple h1, .fa-banner-purple h2, .fa-banner-purple h3, .fa-banner-purple h4,
.fa-newsletter h1, .fa-newsletter h2, .fa-newsletter h3, .fa-newsletter h4 {
    color: #fff !important;
}
/* שחרור הקונטיינר של התבנית לרוחב מלא בעמוד הבית בלבד */
body.home .grid-container,
body.home .entry-content,
body.home .site-main,
body.home .inside-article {
    max-width: 100% !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 auto;
    overflow-x: hidden;
}
/* ---------- רכיבי עזר גנריים ---------- */
.fa-wrap { max-width: 1200px; margin: 0 auto; padding: 72px 24px; }
.fa-wrap-sm { max-width: 1120px; margin: 0 auto; padding: 80px 24px; }
.fa-wrap-xs { max-width: 1000px; margin: 0 auto; padding: 80px 24px; }
.fa-wrap-narrow { max-width: 900px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.fa-section-gray {
    background: var(--fa-bg-gray);
    border-top: 1px solid var(--fa-bg-gray-border);
    border-bottom: 1px solid var(--fa-bg-gray-border);
}
.fa-head-center { text-align: center; max-width: 760px; margin: 0 auto 44px; }
.fa-head-center.is-narrow { max-width: 640px; }
.fa-head-center.is-wide { max-width: 720px; }
/* יישור למרכז מחוזק — מבטיח דריסה של יישור ברירת המחדל (ימני) שמגיע
   מהתבנית/וורדפרס ישירות על תגי הכותרות עצמם */
.fa-text-center { text-align: center !important; }
.fa-h2 { font-size: 34px; font-weight: 800; margin: 0 0 12px; line-height: 1.15; }
.fa-h2-tight { font-size: 34px; font-weight: 800; margin: 0 0 16px; line-height: 1.15; }
.fa-lead { font-size: 18px; color: var(--fa-text-light); line-height: 1.7; margin: 0; }
.fa-home .fa-lead-muted { font-size: 18px; color: var(--fa-text-muted); line-height: 1.8; margin: 0 0 18px; }
.fa-home .fa-lead-muted:last-child { margin-bottom: 0; }
/* ---------- כפתורים ---------- */
.fa-home .fa-btn-primary {
    display: inline-block;
    background: var(--fa-purple);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    padding: 15px 32px;
    border: 1.5px solid transparent;
    border-radius: var(--fa-radius-sm);
    box-shadow: var(--fa-shadow-purple);
}
.fa-home .fa-btn-primary:hover { color: #fff; background: var(--fa-purple-dark); }
.fa-home .fa-btn-outline {
    display: inline-block;
    background: #fff;
    color: var(--fa-purple);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    padding: 15px 32px;
    border: 1.5px solid #d7dbee;
    border-radius: var(--fa-radius-sm);
}
.fa-home .fa-btn-outline:hover { background: var(--fa-purple-dark); color: #fff; border-color: var(--fa-purple-dark); }
.fa-home .fa-btn-white {
    display: inline-block;
    background: #fff;
    color: var(--fa-purple-dark);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
    padding: 15px 32px;
    border: 1.5px solid transparent;
    border-radius: var(--fa-radius-sm);
    white-space: nowrap;
}
.fa-home .fa-btn-white:hover { color: var(--fa-purple); }
.fa-link-more { color: var(--fa-purple); font-weight: 700; font-size: 15px; }
.fa-link-more.is-sm { font-size: 14px; }
.fa-link-more.is-md { font-size: 16px; }
/* ---------- תגיות "pill" ---------- */
.fa-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--fa-purple-soft);
    color: var(--fa-purple);
    font-weight: 700;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: 22px;
}
.fa-badge-sm {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    background: var(--fa-purple-soft);
    color: var(--fa-purple);
    font-weight: 700;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}
/* ---------- כוכבים ודירוג ---------- */
.fa-stars { color: var(--fa-amber); letter-spacing: 1px; }
.fa-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--fa-text-light);
    font-size: 16px;
    font-weight: 600;
}
.fa-rating-row .fa-stars { font-size: 19px; }
.fa-rating-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fa-rating-badge .fa-rating-num { font-size: 30px; font-weight: 800; color: var(--fa-ink); }
.fa-rating-badge .fa-stars { font-size: 22px; }
/* =========================================================
   1. HERO
   ========================================================= */
.fa-hero { background: linear-gradient(180deg, #f6f7fc 0%, #ffffff 100%); }
.fa-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 24px 64px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
}
.fa-home .fa-hero-title {
    font-size: 52px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--fa-ink);
    margin: 0 0 20px;
    text-wrap: balance;
}
.fa-home .fa-hero-text {
    font-size: 19px;
    line-height: 1.7;
    color: var(--fa-text-muted);
    margin: 0 0 30px;
    max-width: 560px;
}
.fa-hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.fa-hero-buttons .fa-btn-primary,
.fa-hero-buttons .fa-btn-outline { min-width: 260px; text-align: center; }
.fa-hero-visual { position: relative; }
.fa-hero-glow {
    position: absolute;
    inset: -16px;
    background: radial-gradient(circle at 50% 40%, #e7e9f7 0%, rgba(231, 233, 247, 0) 70%);
    border-radius: 50%;
}
.fa-hero-img { position: relative; width: 100%; height: auto; display: block; }
/* =========================================================
   1.b HERO 2  (.fa-hero2) — דף הבית, גרסה 2026
   נוסף כשכבה נפרדת. סקציית .fa-hero שמעל נשארת ללא שינוי,
   כי היא בשימוש גם בעמוד 'צבי חזנוב' (12359) ובדף הבית הניסיוני (133290).
   כל הצבעים מגיעים מהמשתנים הקיימים ב-:root.
   ========================================================= */
.fa-hero2 {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f6f7fc 0%, #ffffff 100%);
    border-bottom: 1px solid var(--fa-bg-gray-border, #eceef6);
}
.fa-hero2-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 24px 60px;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 48px;
    align-items: center;
}

/* ---------- טור טקסט ---------- */
.fa-hero2-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}
.fa-hero2-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: var(--radius-pill, 999px);
    background: var(--fa-purple-soft, #eef1fa);
    color: var(--color-link, #4F64B0);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
}
.fa-hero2-stars { color: var(--fa-amber, #f5a623); letter-spacing: 1px; }

.fa-hero2 .fa-hero2-title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(2.4rem, 1.6rem + 3vw, 4.375rem);
    line-height: 1.06;
    letter-spacing: -1.2px;
    color: var(--fa-ink, #1A1800);
    text-wrap: balance;
}
/* display:block + fit-content — כדי שהשורה תשב מתחת לכותרת
   וההדגשה האדומה תיצמד לרוחב הטקסט ולא לרוחב העמודה */
.fa-hero2-title-accent {
    position: relative;
    display: block;
    width: fit-content;
    margin-top: .3em;
    font-size: clamp(1.75rem, 1.2rem + 2vw, 3.125rem);
    color: var(--color-link, #4F64B0);
}
.fa-hero2-title-accent::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 2px;
    height: 12px;
    border-radius: 6px;
    background: var(--accent-red, #CF3834);
    opacity: .18;
    pointer-events: none;
}

.fa-hero2 .fa-hero2-text {
    margin: 0;
    max-width: 565px;
    font-family: var(--font-body);
    font-size: clamp(1.0625rem, 1rem + .35vw, 1.28rem);
    line-height: 1.62;
    color: var(--fa-text-muted, #565c69);
    text-wrap: pretty;
}

/* ---------- כפתורים ---------- */
.fa-hero2-buttons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
}
.fa-hero2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    padding: 17px 30px;
    border: 1.5px solid transparent;
    border-radius: var(--fa-radius-sm, 12px);
    font-family: var(--font-heading);
    font-size: 19px;
    line-height: 1.2;
    text-decoration: none;
    transition: var(--btn-transition, all .3s ease);
}
.fa-hero2-btn.is-primary {
    background: var(--color-link, #4F64B0);
    color: #fff;
    font-weight: 800;
    box-shadow: var(--fa-shadow-purple, 0 8px 20px rgba(79, 100, 176, .28));
}
.fa-hero2-btn.is-primary:hover,
.fa-hero2-btn.is-primary:focus-visible {
    background: var(--color-link-hover, #15399B);
    color: #fff;
    transform: translateY(-2px);
}
.fa-hero2-btn.is-outline {
    background: #fff;
    color: var(--color-link, #4F64B0);
    border-color: #d7dbee;
    font-weight: 700;
}
.fa-hero2-btn.is-outline:hover,
.fa-hero2-btn.is-outline:focus-visible {
    background: var(--color-link-hover, #15399B);
    border-color: var(--color-link-hover, #15399B);
    color: #fff;
}

.fa-hero2 .fa-hero2-note {
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: 16.5px;
    color: var(--fa-text-light, #6b7180);
}

/* ---------- טור ויזואלי ---------- */
.fa-hero2-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 440px;
}
/* העיגול האפור הוסר — הדמויות יושבות ישירות על רקע ה-HERO.
   האלמנט נשאר ב-HTML כדי שאפשר יהיה להחזיר בשורה אחת. */
.fa-hero2-glow { display: none; }
/* בלי mix-blend-mode: הלוגו הוא PNG שקוף (מדיה 133800, 624x466).
   הסלקטור הכפול מנטרל את הכלל הגלובלי ".entry-content img" שמוסיף
   border-radius ו-box-shadow לכל תמונה. הוא (0,1,1) ולכן גבר על
   ".fa-hero2-img" לבדו. הכלל הגלובלי עצמו לא שונה. */
.fa-hero2 .fa-hero2-img {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

/* אביזרים — קבצים יעודיים בפי 3 מהגודל המוצג, במקום חיתוך מהספריט.
   הספריט הוצג 1:1 ולכן נראה רך במסכי רטינה, ובמובייל אף עבר דגימה
   כפולה (הקטנה ל-0.75 ואז הגדלה על ידי המכשיר) — משם הטשטוש.
   background-size: contain מייתר לחלוטין את חישובי ה-background-position. */
.fa-hero2-prop {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    mix-blend-mode: multiply;
    pointer-events: none;
}
/* מיקומים לוגיים (inset-inline) — מתהפכים אוטומטית בגרסה האנגלית.
   פריסת משולש זהה לזו של המובייל: יין למעלה-ימין, קרואסון
   למעלה-שמאל, באגט ממורכז בתחתית. כל אביזר מאפס במפורש
   את הצד הנגדי, אחרת שני צדדים מוגדרים יוצרים over-constrained. */
.fa-hero2-prop.is-wine      { background-image: url('https://www.francophilesanonymes.com/wp-content/uploads/2026/07/fa-hero2-wine.webp');      top: 0;    bottom: auto; inset-inline-start: 0;  inset-inline-end: auto;   width: 52px;  height: 92px; transform: rotate(-6deg); }
.fa-hero2-prop.is-croissant { background-image: url('https://www.francophilesanonymes.com/wp-content/uploads/2026/07/fa-hero2-croissant.webp'); top: 6px;  bottom: auto; inset-inline-end: 0;    inset-inline-start: auto; width: 80px;  height: 68px; transform: rotate(8deg); }
.fa-hero2-prop.is-baguette  { background-image: url('https://www.francophilesanonymes.com/wp-content/uploads/2026/07/fa-hero2-baguette.webp');  top: auto; bottom: 26px; inset-inline-start: 0; inset-inline-end: 0; margin-inline: auto; width: 147px; height: 63px; transform: rotate(-7deg); }

/* ריחוף עדין. כל keyframes כולל את הסיבוב הבסיסי,
   אחרת האנימציה הייתה דורסת את ה-transform ומיישרת את האביזר. */
.fa-hero2-prop.is-wine      { animation: faHero2Wine 7s ease-in-out 0s infinite; }
.fa-hero2-prop.is-croissant { animation: faHero2Croissant 8s ease-in-out .6s infinite; }
.fa-hero2-prop.is-baguette  { animation: faHero2Baguette 9s ease-in-out 1.2s infinite; }

@keyframes faHero2Wine {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50%      { transform: rotate(-10deg) translateY(-7px); }
}
@keyframes faHero2Croissant {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50%      { transform: rotate(12deg) translateY(-6px); }
}
@keyframes faHero2Baguette {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50%      { transform: rotate(-3deg) translateY(-5px); }
}

/* גרסה מוגברת למובייל: האביזרים קטנים שם ב-25%,
   ולכן אותה תנועה נקראת פחות. טווח גדול יותר ומחזור מהיר יותר. */
@keyframes faHero2WineM {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50%      { transform: rotate(-12deg) translateY(-10px); }
}
@keyframes faHero2CroissantM {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50%      { transform: rotate(14deg) translateY(-9px); }
}
@keyframes faHero2BaguetteM {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50%      { transform: rotate(-1deg) translateY(-8px); }
}

/* בלוני דיבור */
/* בלוני הדיבור הוסרו מהתצוגה בכל הרזולוציות — הם יצרו עומס
   ויזואלי מעל התמונה. ה-HTML נשאר במקומו — מחיקת שורת
   ה-display מחזירה אותם בדיוק כפי שהיו. */
.fa-hero2 .fa-hero2-bubble {
    display: none;
    position: absolute;
    margin: 0;
    padding: 12px 17px;
    border-radius: var(--fa-radius-md, 16px);
    background: #fff;
    border: 1px solid var(--fa-card-border, #ecedf4);
    box-shadow: var(--elev-1, 0 4px 15px rgba(20, 22, 40, .05));
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15.5px;
    line-height: 1.35;
    color: var(--fa-ink, #1A1800);
    animation: faHero2Float 6s ease-in-out infinite;
}
.fa-hero2 .fa-hero2-bubble.is-top    { top: 14px; inset-inline-end: -6px; max-width: 250px; }
.fa-hero2 .fa-hero2-bubble.is-bottom { bottom: 8px; inset-inline-start: -14px; max-width: 330px; animation-delay: .8s; }

@keyframes faHero2Float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
/* !important הכרחי: כללי המובייל שלמטה ספציפיים יותר (0,2,0)
   ומופיעים מאוחר יותר בקובץ — בלעדיו הם היו מחזירים את התנועה. */
@media (prefers-reduced-motion: reduce) {
    .fa-hero2 .fa-hero2-bubble,
    .fa-hero2-prop { animation: none !important; }
}

/* ---------- פס נתונים ---------- */
.fa-hero2-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--fa-bg-gray, #f7f8fc);
    border-top: 1px solid var(--fa-bg-gray-border, #eceef6);
}
.fa-hero2-stats li {
    margin: 0;
    padding: 20px 26px;
    border-inline-start: 1px solid var(--fa-bg-gray-border, #eceef6);
}
.fa-hero2-stats li:first-child { border-inline-start: 0; }
.fa-hero2-stats strong {
    display: block;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 23px;
    line-height: 1.2;
    color: var(--color-link, #4F64B0);
}
.fa-hero2-stats span {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--fa-text-muted, #565c69);
}

/* ---------- רספונסיביות ---------- */
@media (max-width: 980px) {
    .fa-hero2-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 34px 20px 30px;
        text-align: center;
    }
    .fa-hero2-visual { order: -1; min-height: 240px; }
    .fa-hero2-body { align-items: center; }
    .fa-hero2-buttons { flex-wrap: wrap; justify-content: center; width: 100%; }
    .fa-hero2 .fa-hero2-text { margin-inline: auto; }
    .fa-hero2-title-accent { margin-inline: auto; }

    /* במובייל בלוני הדיבור מוסתרים — ברוחב טלפון הם צפופים מדי.
       הטור מוגבל ל-340px כדי שהאביזרים יישארו צמודים לתמונה גם בטאבלט.
       קריטי: כל אביזר מאפס במפורש את הצד הנגדי (inset-inline-*: auto ו-top/bottom: auto),
       אחרת המיקום מהדסקטופ ממשיך לחול ומנצח במצב over-constrained. */
    .fa-hero2-visual { max-width: 340px; margin-inline: auto; }
    .fa-hero2 .fa-hero2-img { width: 100%; max-width: 300px; }
    .fa-hero2-prop.is-wine      { top: 0;    bottom: auto; inset-inline-start: 0;  inset-inline-end: auto;   width: 39px;  height: 69px; }
    .fa-hero2-prop.is-croissant { top: 6px;  bottom: auto; inset-inline-end: 0;    inset-inline-start: auto; width: 60px;  height: 51px; }
    /* מרכוז אופקי מתחת לדמות האמצעית, בלי transform —
       ה-transform שמור לאנימציה והיה דורס כל translateX. שני הצדדים 0 + margin אוטומטי. */
    .fa-hero2-prop.is-baguette  { display: block; top: auto; bottom: 6px; inset-inline-start: 0; inset-inline-end: 0; margin-inline: auto; width: 110px; height: 47px; }

    /* רק שם ה-keyframes והמשך מוחלפים — עיכוב, קצב וחזרה איןסופית נשארים מהכלל הבסיסי */
    .fa-hero2-prop.is-wine      { animation-name: faHero2WineM;      animation-duration: 5.5s; }
    .fa-hero2-prop.is-croissant { animation-name: faHero2CroissantM; animation-duration: 6.5s; }
    .fa-hero2-prop.is-baguette  { animation-name: faHero2BaguetteM;  animation-duration: 7.5s; }

    .fa-hero2-stats { grid-template-columns: 1fr 1fr; }
    .fa-hero2-stats li { padding: 14px 18px; }
    .fa-hero2-stats li:nth-child(odd)  { border-inline-start: 0; }
    .fa-hero2-stats li:nth-child(-n+2) { border-bottom: 1px solid var(--fa-bg-gray-border, #eceef6); }
    .fa-hero2-stats strong { font-size: 19px; }
    .fa-hero2-stats span   { font-size: 13.5px; }
}
@media (max-width: 620px) {
    .fa-hero2-btn { width: 100%; padding: 15px 20px; font-size: 17px; }
    .fa-hero2 .fa-hero2-note { font-size: 14.5px; }
}

/* ---------- הדפסה ---------- */
@media print {
    .fa-hero2-glow,
    .fa-hero2-prop,
    .fa-hero2 .fa-hero2-bubble { display: none !important; }
    .fa-hero2 {
        background: none !important;
        border: 1px solid #999 !important;
    }
    .fa-hero2-stats { background: none !important; }
}

/* =========================================================
   2. PLANNING PARIS (באנר + פיצול דו-טורי)
   ========================================================= */
.fa-plan-section { max-width: 1200px; margin: 0 auto; padding: 80px 24px 40px; }
.fa-banner-purple {
    background: linear-gradient(120deg, var(--fa-purple) 0%, var(--fa-purple-dark) 100%);
    border-radius: var(--fa-radius-lg);
    padding: 44px 48px;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 56px;
    box-shadow: 0 18px 40px rgba(79, 100, 176, .22);
}
.fa-banner-purple .fa-banner-body { max-width: 640px; }
.fa-banner-eyebrow { color: #e9ecf9; /* היה #c7cbeb (3.48:1 על הבאנר הכחול, נכשל) — כעת 4.71:1 */ font-weight: 700; font-size: 15px; letter-spacing: .5px; margin-bottom: 10px; }
.fa-home .fa-banner-title { color: #fff !important; font-size: 34px; font-weight: 800; margin: 0 0 12px; }
.fa-banner-text { color: #dfe1f3; font-size: 18px; line-height: 1.6; margin: 0; }
.fa-paris-split {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 36px;
    align-items: start;
}
.fa-col-title { font-size: 24px; font-weight: 800; color: var(--fa-ink); margin: 0 0 6px; }
.fa-col-sub { font-size: 16px; color: var(--fa-text-lighter); margin: 0 0 24px; }
/* רשת כרטיסי הכתבות (2 טורים) */
.fa-articles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
/* כרטיס כתבה (תמונה למעלה) */
.fa-card {
    display: block;
    background: #fff;
    border: 1px solid var(--fa-card-border);
    border-radius: var(--fa-radius-md);
    overflow: hidden;
    box-shadow: var(--fa-shadow-card);
    transition: transform .2s ease, box-shadow .2s ease;
}
.fa-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 22, 40, .1); }
.fa-card-img { width: 100%; height: auto; display: block; }
.fa-card-body { padding: 18px 20px 22px; }
.fa-card-title { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.fa-card-text { font-size: 15px; line-height: 1.6; color: #5c6270; margin: 0 0 14px; }
/* Sidebar אטרקציות חובה */
.fa-sidebar {
    background: var(--fa-bg-gray);
    border: 1px solid var(--fa-bg-gray-border);
    border-radius: 20px;
    padding: 26px 24px;
}
.fa-sidebar-title { font-size: 22px; font-weight: 800; color: var(--fa-ink); margin: 0 0 4px; }
.fa-sidebar-sub { font-size: 15px; color: var(--fa-text-lighter); margin: 0 0 20px; }
.fa-sidebar-list { display: flex; flex-direction: column; gap: 14px; }
.fa-attr-card {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid #edeef4;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 3px 10px rgba(20, 22, 40, .04);
    transition: transform .2s ease;
}
.fa-attr-card:hover { transform: translateX(-3px); }
.fa-attr-img { width: 100px; height: auto; border-radius: 10px; flex-shrink: 0; }
.fa-attr-name { font-weight: 800; color: var(--fa-ink); font-size: 16px; }
.fa-attr-desc { font-size: 13.5px; color: var(--fa-text-lighter); }
/* =========================================================
   3. מפת צרפת אינטראקטיבית
   ========================================================= */
.fa-map-grid {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
}
.fa-map-frame {
    background: #fff;
    border: 1px solid var(--fa-bg-gray-border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 26px rgba(20, 22, 40, .05);
    position: relative;
    max-width: 700px !important;
    width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
}
/* המפה האינטראקטיבית הקיימת (franco-map) — התאמה למסגרת החדשה.
   ה-!important כאן נדרש כדי לנטרל כל רוחב/float קבוע שמגיע
   מהעיצוב הקיים של המפה באתר, ולהבטיח שהיא תמיד תתמלא ותתמרכז
   בתוך המסגרת החדשה בעמודה אחת. */
.fa-map-frame .franco-map-container {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: relative !important;
}
.fa-map-frame .franco-base-map { width: 100%; height: auto; display: block; }
/* =========================================================
   4. ארגז כלים (כרטיס split)
   ========================================================= */
.fa-split-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border: 1px solid var(--fa-card-border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--fa-shadow-strong);
}
.fa-split-body { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; }
.fa-split-media { background: #eceeffb0; min-height: 340px; }
.fa-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* =========================================================
   5. המלצות (Testimonials)
   ========================================================= */
.fa-testi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fa-testi-card {
    background: #fff;
    border: 1px solid var(--fa-card-border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--fa-shadow-card);
    display: flex;
    flex-direction: column;
}
.fa-testi-stars { color: var(--fa-amber); font-size: 16px; letter-spacing: 1px; margin-bottom: 12px; }
.fa-testi-text { font-size: 15.5px; line-height: 1.65; color: var(--fa-text); margin: 0 0 18px; flex-grow: 1; }
.fa-testi-person { display: flex; align-items: center; gap: 12px; }
.fa-testi-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fa-testi-name { font-weight: 700; color: var(--fa-ink); font-size: 15px; }
.fa-testi-source { font-size: 13px; color: var(--fa-text-light); } /* היה #9096a3 (2.97:1, נכשל) — עכשיו 4.88:1, עובר AA */
.fa-center-30 { text-align: center; margin-top: 30px; }
/* עטיפה לווידג'ט ההמלצות הקיים [grw] אם ייעשה בו שימוש */
.fa-reviews-embed { max-width: 1200px; margin: 0 auto; }
/* =========================================================
   6. קצת תרבות (2 כרטיסים גדולים)
   ========================================================= */
.fa-culture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.fa-culture-card {
    display: block;
    background: #fff;
    border: 1px solid var(--fa-card-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20, 22, 40, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.fa-culture-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(20, 22, 40, .1); }
.fa-culture-card img { width: 100%; height: auto; display: block; }
.fa-culture-body { padding: 28px 30px 32px; }
.fa-culture-title { font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.fa-culture-text { font-size: 16px; line-height: 1.7; color: var(--fa-text-muted); margin: 0 0 20px; }
/* =========================================================
   7. כתבות אחרונות + קטגוריות (רשת 4 טורים)
   ========================================================= */
.fa-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fa-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.fa-cat-tag {
    background: var(--fa-purple);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}
/* מעטפת לרשת ה-AJAX הקיימת [zvi_ajax_grid] */
.fa-latest-embed { max-width: 1200px; margin: 0 auto; }
/* =========================================================
   8. מי הוא הפרנקופיל (About)
   ========================================================= */
.fa-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.fa-about-img-frame {
    border-radius: var(--fa-radius-lg);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(20, 22, 40, .12);
}
.fa-about-img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* =========================================================
   9. ניוזלטר (רקע סגול)
   ========================================================= */
.fa-newsletter { background: linear-gradient(120deg, var(--fa-purple) 0%, var(--fa-purple-dark) 100%); }
.fa-newsletter-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 64px 24px;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
}
.fa-home .fa-newsletter-title { font-size: 34px; font-weight: 800; color: #fff !important; margin: 0 0 16px; }
.fa-newsletter-text { font-size: 18px; line-height: 1.75; color: #dfe1f3; margin: 0 0 14px; }
.fa-newsletter-text.is-last { margin-bottom: 28px; }
.fa-newsletter-media { text-align: center; }
.fa-newsletter-media img { width: 100%; max-width: 340px; height: auto; display: inline-block; }
/* =========================================================
   10. מומחים (Experts)
   ========================================================= */
.fa-experts-text { font-size: 18px; line-height: 1.8; color: var(--fa-text-muted); margin: 0 0 14px; }
.fa-experts-text.is-last { margin-bottom: 30px; }
.fa-experts-text strong { color: var(--fa-ink); }
/* =========================================================
   11. קהילת פייסבוק (רשת 5 טורים)
   ========================================================= */
.fa-fb-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--fa-card-border);
    border-radius: var(--fa-radius-md);
    padding: 24px;
    box-shadow: var(--fa-shadow-card);
    transition: transform .2s ease;
}
.fa-fb-card:hover { transform: translateY(-3px); }
.fa-fb-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--fa-purple-soft);
    color: var(--fa-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.fa-fb-icon svg { width: 24px; height: 24px; fill: var(--fa-purple); }
.fa-fb-title { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.fa-fb-text { font-size: 14.5px; color: var(--fa-text-lighter); line-height: 1.55; margin: 0 0 16px; flex-grow: 1; }
.fa-fb-link { color: var(--fa-purple); font-weight: 700; font-size: 14.5px; }
/* =========================================================
   12. יצירת קשר (Contact)
   ========================================================= */
.fa-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fa-contact-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--fa-card-border);
    border-radius: 18px;
    padding: 28px;
    box-shadow: var(--fa-shadow-soft);
    transition: transform .2s ease;
}
.fa-contact-card:hover { transform: translateY(-3px); }
.fa-contact-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}
.fa-contact-icon.is-whatsapp { background: #e7f6ec; color: #25a34a; }
.fa-contact-icon.is-mail { background: var(--fa-purple-soft); color: var(--fa-purple); font-size: 26px; }
.fa-contact-label { font-weight: 800; color: var(--fa-ink); font-size: 20px; }
.fa-contact-value { font-size: 16px; color: var(--fa-text-light); }
/* =========================================
   רספונסיביות
   ========================================= */
@media (max-width: 980px) {
    .fa-hero-inner { grid-template-columns: 1fr; text-align: center; gap: 36px; }
    .fa-hero-visual { order: -1; }
    .fa-hero-title { text-align: center; }
    .fa-hero-text { margin-inline: auto; text-align: center; }
    .fa-hero-buttons { justify-content: center; }
    .fa-rating-row { justify-content: center; }
    .fa-paris-split { grid-template-columns: 1fr; }
    .fa-split-card { grid-template-columns: 1fr; }
    .fa-split-media { order: -1; min-height: 240px; }
    .fa-about-grid { grid-template-columns: 1fr; }
    .fa-about-img-frame { order: -1; }
    .fa-newsletter-inner { grid-template-columns: 1fr; }
    .fa-newsletter-media { order: -1; }
    .fa-culture-grid { grid-template-columns: 1fr; }
    .fa-contact-grid { grid-template-columns: 1fr; }
    .fa-grid-4 { grid-template-columns: 1fr 1fr; }
    .fa-grid-5 { grid-template-columns: 1fr 1fr; }
    .fa-testi-grid { grid-template-columns: 1fr 1fr; }
    .fa-h2, .fa-h2-tight, .fa-banner-title, .fa-newsletter-title { font-size: 28px; }
    .fa-hero-title { font-size: 40px; }
    .fa-wrap, .fa-wrap-sm, .fa-wrap-xs, .fa-wrap-narrow,
    .fa-plan-section { padding-top: 52px; padding-bottom: 52px; }
}
@media (max-width: 620px) {
    .fa-articles-grid { grid-template-columns: 1fr; }
    .fa-grid-4, .fa-grid-5, .fa-testi-grid { grid-template-columns: 1fr; }
    .fa-hero-title { font-size: 32px; }
    .fa-split-body { padding: 32px 24px; }
    .fa-banner-purple { padding: 28px 24px; }
    .fa-hero-buttons .fa-btn-primary,
    .fa-hero-buttons .fa-btn-outline { width: 100%; text-align: center; }
    .fa-banner-purple .fa-btn-white { width: 100%; text-align: center; }
}
/* תיקון: כפתור פריז על המפה יתאים לעיצוב שאר המחוזות */
.franco-pin.pin-paris {
    background: #ffffff !important;
    color: var(--fa-purple-dark) !important;
    border-color: var(--fa-purple-dark) !important;
}

/* =========================================
   36.5 ZVI DYNAMIC TABS & SEO HIDDEN ELEMENTS
   ========================================= */
.zvi-tab-section-wrapper {
    position: relative;
    width: 100%;
}

/* placeholder ששומר את הגובה של שורת הטאבים כשהיא הופכת ל-fixed,
   כדי שהתוכן לא "יקפוץ" - בדיוק כמו #zvi-toc-placeholder הקיים */
.zvi-tab-placeholder {
    display: none;
    width: 100%;
}
.zvi-tab-placeholder.is-active {
    display: block;
}

.zvi-tab-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    margin: 20px 0 30px 0;
    justify-content: center; /* ברירת מחדל: ממורכז כשכל הטאבים נכנסים ברוחב */

    background-color: #ffffff;
    padding: 12px 20px;
    border-bottom: 1px solid var(--sb-border, #D7D7D6);
    box-sizing: border-box;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    /* מסמן לדסקטופ שאפשר לגרור/לגלול את השורה בעכבר */
    cursor: grab;
}
.zvi-tab-buttons::-webkit-scrollbar {
    display: none;
}
.zvi-tab-buttons.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* כשיש יותר טאבים מרוחב המסך - עוברים ליישור מההתחלה (מימין ב-RTL),
   כך שהטאב הראשון תמיד שלם ורק הבאים אחריו נראים חתוכים אם גולשים */
.zvi-tab-buttons.is-scrollable {
    justify-content: flex-start;
}

/* מצב "נעוץ" - מוזרק ע"י JS כשמגיעים לאזור הכרטיסים.
   fixed + left:0 + right:0 = רוחב מלא אמיתי של המסך, בלי טריקי vw. */
.zvi-tab-buttons.is-pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    z-index: 850;
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    animation: zviTabsPinIn 0.25s ease;
}

/* התאמה לבר האדמין של וורדפרס (בדיוק כמו ב-#sticky-toc-wrapper הקיים) */
.admin-bar .zvi-tab-buttons.is-pinned { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .zvi-tab-buttons.is-pinned { top: 46px; }
}

@keyframes zviTabsPinIn {
    from { transform: translateY(-8px); opacity: 0.6; }
    to   { transform: translateY(0); opacity: 1; }
}

/* מסתיר את תפריט ה-TOC העליון הקיים כל עוד הטאבים תופסים את מקומו,
   כדי שלא יהיו שני באנרים דביקים חופפים */
#sticky-toc-wrapper.zvi-hidden-by-tabs {
    display: none !important;
}

.zvi-tab-btn {
    background: transparent;
    border: 2px solid var(--sb-border, #D7D7D6);
    color: var(--color-text-muted, #555555);
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--font-heading);
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    min-height: 40px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.zvi-tab-btn:hover {
    border-color: var(--color-link, #4F64B0);
    color: var(--color-link, #4F64B0);
}
.zvi-tab-btn.is-active {
    background: var(--color-link, #4F64B0);
    border-color: var(--color-link, #4F64B0);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(79, 100, 176, 0.25);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.zvi-tab-group {
    width: 100%;
}
.zvi-tab-group .hotel-card-container,
.zvi-tab-group .zvi-smart-grid {
    grid-template-columns: 1fr !important;
    max-width: 900px;
    margin: 0 auto;
}

@keyframes zviCardFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}/* אזור הדירוג: מיושר לשמאל
{ 
    display: flex; 
    flex-direction: row-reverse; 
    align-items: center; 
    gap: 10px; 
    flex-shrink: 0; 
}.zvi-rating-score
{ 
    background-color: var(--color-link, #4F64B0); 
    color: #ffffff; 
    font-family: var(--font-heading); 
    font-weight: 800; 
    font-size: 1.15rem; 
    padding: 6px 12px; 
    border-radius: 8px; 
    line-height: 1; 
    box-shadow: 0 4px 10px rgba(79, 100, 176, 0.2); 
}
/* כוכבי דירוג */
.zvi-hotel-card .zvi-stars,
.zvi-rating-stars { 
    color: var(--fa-amber); 
    font-size: 1.1rem; 
    letter-spacing: 2px; 
    line-height: 1; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); 
}
/* אזור יתרונות/חסרונות */
.zvi-hotel-card .fa-pros-cons { 
    margin-top: 0; 
    margin-bottom: 15px; 
    background-color: #fcfcfc; 
}
/* =========================================
   38. ZVI BOOKING CARD — Vertical Card v3.0
   כרטיס אנכי: מדיה למעלה, תוכן ממורכז למטה, CTA נעוץ לתחתית.
   פריסה: 2 כרטיסים בשורה בדסקטופ, 1 במובייל — דרך .zvi-booking-grid
   (נוצרת אוטומטית ע"י JS סביב רצף כרטיסים סמוכים, או ידנית במאמר).
   האקורדיון "קראו עוד" (details.zvi-booking-details) נשמר במלואו.
   ========================================= */

/* --- 38.1 רשת הכרטיסים --- */
.zvi-booking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
    width: 100%;
    margin: 0 0 28px;
    box-sizing: border-box;
}
.zvi-booking-grid > .zvi-booking-card,
.zvi-2col-grid > .zvi-booking-card {
    max-width: none;
    margin-inline: 0;
    margin-bottom: 0;
    height: 100%;
}

/* --- 38.2 מעטפת הכרטיס --- */
.zvi-booking-card {
    display: flex;
    flex-direction: column;
    direction: rtl;
    width: 100%;
    max-width: 620px; /* כרטיס בודד לא מתמתח על כל רוחב המאמר */
    margin-inline: auto;
    margin-bottom: 28px;
    background: #ffffff;
    border: 1px solid var(--sb-border, #D7D7D6);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    position: relative;
}
.zvi-booking-card:hover {
    box-shadow: 0 10px 28px rgba(0,0,0,0.10);
    transform: translateY(-3px);
}

/* --- 38.3 תג בולט ("התגוררתי כאן!") — צף על פינת התמונה --- */
.zvi-booking-badge {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--accent-red, #CF3834);
    color: #ffffff;
    padding: 6px 16px;
    margin: 0;
    border-radius: 0 14px 0 12px;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    z-index: 10;
    box-shadow: -2px 2px 8px rgba(0,0,0,0.15);
}
.zvi-booking-content > p:has(.zvi-booking-badge),
.zvi-booking-content > p:empty {
    margin: 0;
    padding: 0;
    height: 0;
    display: none;
}
.zvi-booking-badge + br { display: none; }

/* --- 38.4 אזור המדיה: רוחב מלא בראש הכרטיס --- */
.zvi-booking-media {
    order: 0;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    background: #eef1f6;
    display: block;
    cursor: pointer;
}
.zvi-booking-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, opacity 0.3s ease;
}
.zvi-booking-card:hover .zvi-booking-media img {
    transform: scale(1.04);
}.zvi-image-price-overlay
{
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(58, 58, 58, 0.95);
    color: #ffffff;
    padding: 7px 14px;
    border-radius: 12px 0 0 0;
    font-size: 1rem;
    font-weight: 700;
    z-index: 5;
    margin: 0;
    border: none;
    box-shadow: -2px -2px 10px rgba(0,0,0,0.2);
}
.zvi-booking-media iframe,
.zvi-booking-media video {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}
.zvi-booking-media .zvi-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 3.4rem;
    padding: 20px;
    box-sizing: border-box;
}

/* --- 38.5 אזור התוכן --- */
.zvi-booking-content {
    order: 1;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 22px 20px 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    text-align: center;
}
/* סדר ויזואלי קבוע: כותרת ← מטא-דאטה ← תיאור ← קופסת טיפים ← קראו עוד ← כפתורים
   (נדרש כי סדר ה-HTML במאמרים הקיימים אינו אחיד) */
.zvi-booking-content > * { order: 6; }.zvi-booking-content > .zvi-booking-title
{ order: 1; }.zvi-booking-content > .zvi-booking-meta,
.zvi-booking-content > .zvi-booking-metas
{ order: 2; }
.zvi-booking-content > .zvi-booking-desc { order: 3; }
.zvi-booking-content > .fa-pros-cons,
.zvi-booking-content > .zvi-cruise-features { order: 4; }
.zvi-booking-content > .zvi-booking-details { order: 5; }
.zvi-booking-content > .zvi-booking-actions { order: 9; }
.zvi-booking-title {
    margin: 0 0 10px;
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-main, #1A1800);
    text-align: center;
}
.zvi-booking-content .wp-block-heading {
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    margin-block-start: 0.2em;
    margin-block-end: 10px;
}
.zvi-booking-meta,
.zvi-booking-metas {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.5;
    text-align: center;
    color: var(--color-link, #4F64B0);
    font-weight: 700;
}
.zvi-booking-meta:empty,
.zvi-booking-metas:empty { display: none; }

/* תיאור הכרטיס — ממורכז, אפור משני, כמו בעיצוב */
.zvi-booking-desc {
    margin: 0 0 16px;
    font-size: 0.97rem;
    line-height: 1.65;
    text-align: center;
    color: var(--fa-text-light, #6b7180);
    overflow-wrap: break-word;
    word-break: break-word;
    flex-shrink: 0;
}
.zvi-booking-desc:last-of-type { margin-bottom: 18px; }

/* --- 38.6 קופסת הטיפים האפורה (fa-pros-cons) בתוך הכרטיס --- */
.zvi-booking-card .zvi-booking-content .fa-pros-cons,
.zvi-booking-card .zvi-booking-content .zvi-cruise-features {
    background-color: #F2F4F7;
    border: 1px solid #E6E9EF;
    border-radius: 10px;
    padding: 15px 16px;
    margin: 0 0 18px;
    box-shadow: none;
    text-align: start;
}
.zvi-booking-card .zvi-booking-content .fa-pros-cons li,
.zvi-booking-card .zvi-booking-content .zvi-cruise-features li {
    margin-bottom: 10px;
    font-size: 0.93rem;
    line-height: 1.5;
    text-align: start;
}
.zvi-booking-card .zvi-booking-content .fa-pros-cons li:last-child,
.zvi-booking-card .zvi-booking-content .zvi-cruise-features li:last-child { margin-bottom: 0; }
/* מודיפייר אופציונלי: קופסה שבה השורות מתחילות באמוג'י שלהן —
   מוסיפים class="fa-pros-cons zvi-icons-only" ועיגולי ה-+/- נעלמים. */
.zvi-booking-card .fa-pros-cons.zvi-icons-only li {
    padding-inline-start: 0;
}
.zvi-booking-card .fa-pros-cons.zvi-icons-only li::before {
    content: none;
    display: none;
}

/* --- 38.7 אקורדיון "קראו עוד" (פונקציונליות נשמרת במלואה) --- */
.zvi-booking-details {
    margin: 0 0 14px;
    width: 100%;
    text-align: center;
}
.zvi-booking-content:has(.zvi-booking-details:not([open])) > .zvi-booking-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 38.8 שורת הכפתורים (CTA) --- */
.zvi-booking-actions {
    margin-top: auto;
    padding-top: 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    width: 100%;
}
.zvi-booking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    padding: 11px 22px;
    min-height: 44px;
    border-radius: 999px;
    transition: all 0.3s ease;
    cursor: pointer;
}
/* כפתור יחיד בכרטיס — תופס את כל רוחב הקונטיינר */
.zvi-booking-actions > a:only-child,
.zvi-booking-actions > .zvi-booking-btn:only-child,
.zvi-booking-actions > .zvi-cta-primary:only-child {
    flex: 1 1 100%;
    width: 100%;
}
/* שני כפתורים ומעלה — רוחב שווה, ללא גלישה */
.zvi-booking-actions > .zvi-booking-btn:not(:only-child) {
    flex: 1 1 0;
    min-width: 130px;
}
/* היררכיה: כפתור ההזמנה מלא — המשני מתווה שמתמלא בריחוף.
   ברירת המחדל לכל כפתור היא כחול מלא (כולל כפתור יחיד בכרטיס). */
.zvi-booking-btn,
.zvi-booking-actions a,
.zvi-booking-actions .zvi-cta-primary {
    background-color: var(--color-link, #4F64B0);
    color: #ffffff;
    border: 2px solid var(--color-link, #4F64B0);
}
.zvi-booking-btn:hover,
.zvi-booking-actions a:hover,
.zvi-booking-actions .zvi-cta-primary:hover {
    background-color: var(--color-link-hover, #15399B);
    border-color: var(--color-link-hover, #15399B);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(79, 100, 176, 0.25);
}
/* כפתור משני: לבן עם מסגרת וטקסט כחולים.
   מזוהה אוטומטית ככפתור שאינו יחיד ואינו קישור הזמנה חיצוני
   (אין לו target="_blank" ואין rel של sponsored/nofollow),
   או במפורש על ידי הוספת class="secondary". */
.zvi-booking-actions > .zvi-booking-btn.secondary,
.zvi-booking-actions > a.secondary,
.zvi-booking-actions > a:not(:only-child):not(.primary-cta):not([target="_blank"]):not([rel~="sponsored"]):not([rel~="nofollow"]) {
    background-color: #ffffff;
    color: var(--color-link, #4F64B0);
    border: 2px solid var(--color-link, #4F64B0);
    box-shadow: none;
}
.zvi-booking-actions > .zvi-booking-btn.secondary:hover,
.zvi-booking-actions > a.secondary:hover,
.zvi-booking-actions > a:not(:only-child):not(.primary-cta):not([target="_blank"]):not([rel~="sponsored"]):not([rel~="nofollow"]):hover {
    background-color: var(--color-link, #4F64B0);
    border-color: var(--color-link, #4F64B0);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(79, 100, 176, 0.25);
}
/* אילוץ ידני: class="primary-cta" מחזיר כפתור לכחול מלא */
.zvi-booking-actions > a.primary-cta {
    background-color: var(--color-link, #4F64B0);
    color: #ffffff;
    border: 2px solid var(--color-link, #4F64B0);
}
.zvi-booking-btn:active { transform: scale(0.98); }
.zvi-booking-btn:focus-visible {
    outline: 3px solid rgba(79, 100, 176, 0.50);
    outline-offset: 2px;
}
/* כפתור CTA גלובלי — נשמר כפי שהיה עבור שימושים מחוץ לכרטיס */
.zvi-cta-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 12px 14px;
    min-height: 48px;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.zvi-cta-primary:active { transform: scale(0.98); }
.zvi-cta-primary:focus-visible {
    outline: 3px solid rgba(79, 100, 176, 0.50);
    outline-offset: 2px;
}
.zvi-booking-actions .zvi-cta-primary {
    border-radius: 999px;
    min-height: 44px;
    font-size: 0.95rem;
    padding: 11px 22px;
}

/* =========================================
   38.9 רספונסיביות
   ========================================= */
@media (max-width: 900px) {
    .zvi-booking-grid { gap: 20px; }
    .zvi-booking-content { padding: 20px 16px 18px; }
}
@media (max-width: 768px) {
    .zvi-booking-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .zvi-booking-grid > .zvi-booking-card,
    .zvi-2col-grid > .zvi-booking-card {
        max-width: 560px;
        margin-inline: auto;
    }
}
@media (max-width: 600px) {
    .zvi-booking-card { border-radius: 12px; margin-bottom: 22px; }
    .zvi-booking-content { padding: 18px 16px 16px; }
    .zvi-booking-title { font-size: 1.2rem; margin-bottom: 8px; }
    .zvi-booking-meta,
    .zvi-booking-metas { margin-bottom: 10px; }
    .zvi-booking-desc { margin-bottom: 12px; }
    .zvi-booking-desc:last-of-type { margin-bottom: 14px; }
    .zvi-booking-card .zvi-booking-content .fa-pros-cons {
        padding: 13px 14px;
        margin-bottom: 14px;
    }
    .zvi-booking-actions { gap: 8px; }
    .zvi-booking-btn {
        padding: 10px 14px;
        font-size: 0.9rem;
        min-height: 42px;
    }
    .zvi-booking-actions > .zvi-booking-btn:not(:only-child) { min-width: 118px; }
}
@keyframes zviBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(0,0,0,0.18), 0 0 0 0 var(--badge-glow, transparent); }
  50% { transform: scale(1.045); box-shadow: 0 8px 20px rgba(0,0,0,0.24), 0 0 0 6px var(--badge-glow, transparent); }
}
.fa-badge-lived, .zvi-badge-bestseller, .zvi-badge-premium, .zvi-badge-warning, .zvi-badge-stayed, .zvi-cruise-badge {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--badge-bg, var(--accent-red)) 0%, color-mix(in srgb, var(--badge-bg, var(--accent-red)) 82%, black) 100%);
  color: var(--badge-color, #ffffff);
  padding: 7px 16px 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  z-index: 101;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  pointer-events: none;
  --badge-glow: color-mix(in srgb, var(--badge-bg, var(--accent-red)) 45%, transparent);
}
/* אייקוני SVG במקום תווי יוניקוד (★ ♛ ⚠ ⚓) — רינדור עקבי בין דפדפנים/מערכות הפעלה,
   וחד יותר מתו טקסט שתלוי בפונט המערכת */
.zvi-badge-bestseller::before {
  content: '';
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 7.1-1.01L12 2z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.zvi-badge-premium::before {
  content: '';
  width: 13px; height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M2 18h20l-1.5-9-5 4-3.5-7-3.5 7-5-4L2 18z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.zvi-badge-warning::before {
  content: '';
  width: 12px; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 3L2 20h20L12 3zm0 5.5a1 1 0 0 1 1 1V14a1 1 0 0 1-2 0V9.5a1 1 0 0 1 1-1zm0 8.75a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.zvi-badge-stayed::before,
.fa-badge-lived::before {
  content: '';
  width: 11px; height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12.5L9 17.5L20 6.5' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.zvi-cruise-badge::before {
  content: '';
  width: 13px; height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' d='M12 3v4m0 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 4v10m-7-6a7 7 0 0 0 7 6 7 7 0 0 0 7-6M5 11h2m10 0h2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .fa-badge-lived, .zvi-badge-bestseller, .zvi-badge-premium, .zvi-badge-warning, .zvi-badge-stayed, .zvi-cruise-badge {
    animation: zviBadgePulse 2.6s ease-in-out 3; /* היה infinite — עכשיו 3 מחזורים ועוצר, פחות "רועד" כשיש כמה באדג'ים על המסך בו-זמנית */
  }
}
.zvi-badge-premium { --badge-bg: var(--color-link-hover); --badge-color: #ffffff; }
.fa-badge-lived { --badge-bg: var(--color-link); --badge-color: #ffffff; }
.zvi-hotel-card .fa-badge-lived { top: 14px; inset-inline-end: 14px; }
.zvi-cruise-features, .fa-pros-cons {
  background-color: var(--bg-quote);
  padding: 20px 22px;
  border-radius: 14px;
  margin-bottom: 20px;
  border: 1px solid var(--sb-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.zvi-booking-content .fa-pros-cons { margin-bottom: 30px; }
.zvi-cruise-features ul, .fa-pros-cons ul, .hotel-card-container ul {
  margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.zvi-cruise-features li::marker, .fa-pros-cons li::marker, .hotel-card-container li::marker {
  content: '';
}
.zvi-cruise-features li, .fa-pros-cons li, .hotel-card-container li {
  position: relative;
  padding-inline-start: 34px;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--color-text-main);
  text-align: start;
  line-height: 1.55;
}
.zvi-cruise-features li:last-child, .fa-pros-cons li:last-child, .hotel-card-container li:last-child { margin-bottom: 0; }
.zvi-booking-content .fa-pros-cons li { margin-bottom: 18px; }
.zvi-booking-content .fa-pros-cons li:last-child { margin-bottom: 0; }
.zvi-cruise-features li::marker, .fa-pros-cons li::marker, .hotel-card-container li::marker { content: ''; }
.zvi-cruise-features li.pro::before, .fa-pro::before, .hotel-card-container li strong::before {
  content: '';
  background-color: var(--color-link);
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 10px 2px, 2px 10px;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
}
.zvi-cruise-features li.con::before, .fa-con::before {
  content: '';
  background-color: var(--accent-red);
  background-image: linear-gradient(#fff, #fff);
  background-size: 10px 2px;
  background-position: center;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
}
.zvi-latest-posts-wrapper ul.hotel-card-container li::before,
.zvi-latest-posts-wrapper ul.hotel-card-container strong::before { display: none; content: none; }
.zvi-outline-btn, .fa-btn-outline, .fa-btn-book, .cta-button, .cta-button-small,
.zvi-ticket-btn, .zvi-load-more-btn, .wp-block-button__link.wp-element-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-weight: var(--btn-font-weight);
    font-size: 1rem;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border-radius: var(--btn-border-radius);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--btn-transition);
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid transparent;
    line-height: 1.5;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}
/* מצב מקלדת (נגישות) */
.zvi-outline-btn:focus-visible, .fa-btn-outline:focus-visible, .fa-btn-book:focus-visible,
.cta-button:focus-visible, .cta-button-small:focus-visible, .zvi-ticket-btn:focus-visible,
.zvi-load-more-btn:focus-visible, .wp-block-button__link.wp-element-button:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}
/* מצב מנוטרל */
.zvi-outline-btn[aria-disabled="true"], .fa-btn-outline[aria-disabled="true"],
.fa-btn-book[aria-disabled="true"], .cta-button[aria-disabled="true"],
.zvi-ticket-btn[aria-disabled="true"], .zvi-load-more-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}
/* Outline variant */
.zvi-outline-btn, .fa-btn-outline {
    background-color: transparent;
    color: var(--color-link);
    border-color: var(--color-link);
}
.zvi-outline-btn:hover, .fa-btn-outline:hover {
    background-color: var(--color-link);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-link) 20%, transparent);
}
.zvi-outline-btn:active, .fa-btn-outline:active {
    transform: translateY(0);
    box-shadow: none;
}
/* Filled / primary variant */
.fa-btn-book, .cta-button, .zvi-ticket-btn, .zvi-load-more-btn {
    background-color: var(--color-link);
    color: #ffffff;
    border-color: var(--color-link);
}
.fa-btn-book:hover, .cta-button:hover, .zvi-ticket-btn:hover, .zvi-load-more-btn:hover {
    background-color: var(--color-link-hover);
    border-color: var(--color-link-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-link-hover) 25%, transparent);
}
.fa-btn-book:active, .cta-button:active, .zvi-ticket-btn:active, .zvi-load-more-btn:active {
    transform: translateY(0);
    box-shadow: none;
}
.cta-button-small {
    padding: 12px 18px; /* היה 6px — גובה סופי ~34px, נכשל ביעד מגע 44px */
    min-height: 44px;
    font-size: 0.9rem;
}
/* מיכל למרווח בין כפתורים סמוכים — שימוש: <div class="zvi-btn-group"> סביב הכפתורים */
.zvi-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
/* WordPress block button — מיושר למערכת הכפתורים הכללית */
.wp-block-button__link.wp-element-button {
    background-color: var(--color-link);
    color: #ffffff;
    border-color: var(--color-link);
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--color-link) 20%, transparent);
}
.wp-block-button__link.wp-element-button:hover {
    background-color: var(--color-link-hover);
    border-color: var(--color-link-hover);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-link-hover) 30%, transparent);
}
.wp-block-button__link.wp-element-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--color-link) 20%, transparent);
}
/* וריאנט פיל מעוגל לגמרי, אופציונלי: <a class="wp-block-button__link wp-element-button is-style-pill"> */
.wp-block-button__link.wp-element-button.is-style-pill {
    border-radius: 50px;
}
.zvi-hotel-card:hover .zvi-ticket-btn, .zvi-uni-card:hover .zvi-ticket-btn {
    background-color: var(--color-link-hover);
    border-color: var(--color-link-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-link-hover) 25%, transparent);
    color: #ffffff;
}
.zvi-btn-full-width {
    display: flex;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding-top: 10px;
}

/* Zvi - 14.08.2026: מרווח עליון לעטיפת כפתור "ספרו לי בתגובות" בתחתית הפוסט (Single Post Footer Generic),
   כדי שלא יידבק לכפתור CTA שמופיע ממש לפניו בגוף הכתבה (למשל כפתור קבוצת הפייסבוק). ממוקד ל-wrapper הייחודי הזה בלבד. */
.zvi-comment-btn-wrapper {
    margin-top: 30px;
}
a.cta-button.zvi-bg-blue, a.fa-btn-book.zvi-bg-blue {
    background-color: #ffffff;
    color: var(--color-link);
    border-color: var(--color-link);
}
a.cta-button.zvi-bg-blue:hover, a.fa-btn-book.zvi-bg-blue:hover {
    background-color: color-mix(in srgb, var(--color-link) 5%, transparent);
}
a.cta-button.zvi-bg-red, a.fa-btn-book.zvi-bg-red {
    background-color: var(--accent-red);
    color: #ffffff;
    border-color: var(--accent-red);
}
a.cta-button.zvi-bg-red:hover, a.fa-btn-book.zvi-bg-red:hover {
    background-color: color-mix(in srgb, var(--accent-red) 82%, black);
    border-color: color-mix(in srgb, var(--accent-red) 82%, black);
}
blockquote, .wp-block-quote, .tip-box, .fr-tip-box, .coupon-box, .fr-top-5-box, .zvi-special-tip-box {
  position: relative;
  background-color: var(--callout-bg);
  border-radius: var(--callout-radius);
  padding: var(--callout-padding);
  margin: 40px 0;
  box-shadow: var(--callout-shadow);
  border: 1px solid var(--sb-border);
  font-family: var(--font-body);
  color: var(--color-text-main);
  box-sizing: border-box;
  transition: box-shadow .35s ease, transform .35s ease;
}
blockquote:hover, .wp-block-quote:hover, .tip-box:hover, .fr-tip-box:hover,
.zvi-special-tip-box:hover, .fr-top-5-box:hover, .coupon-box:hover {
  box-shadow: var(--card-shadow-hover, 0 12px 25px rgba(0,0,0,.12));
  transform: translateY(-3px);
}
/* ציטוט */
blockquote, .wp-block-quote {
  background: color-mix(in srgb, var(--color-link) 5%, #fff);
  border-inline-start: 4px solid var(--color-link);
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.6;
  padding-inline-end: 76px;
}
blockquote::before, .wp-block-quote::before {
  content: "201D";
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 110px;
  line-height: 1;
  position: absolute;
  top: -22px;
  inset-inline-end: 22px;
  color: var(--color-link);
  opacity: .12;
  pointer-events: none;
}
blockquote cite, .wp-block-quote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-weight: 700;
  font-size: .95rem;
  color: var(--color-text-muted);
}
blockquote cite::before, .wp-block-quote cite::before { content: "— "; }
/* טיפ */
.tip-box, .fr-tip-box {
  background: color-mix(in srgb, var(--accent-red) 5%, #fff);
  border-inline-start: 4px solid var(--accent-red);
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
  font-size: 1.15rem;
  line-height: 1.7;
}
.fr-tip-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent-red);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--sb-border);
}
.fr-tip-title::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent-red);
  flex-shrink: 0;
}
/* תיבת "שימו לב" */
.zvi-special-tip-box {
  text-align: center;
  border: 1px solid var(--sb-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-link) 7%, #fff), #fff);
  box-shadow: 0 8px 30px rgba(79,100,176,.12);
  padding-inline-start: 36px;
}
.zvi-special-tip-box::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--color-link), var(--color-link-hover));
  border-start-start-radius: var(--callout-radius);
  border-end-start-radius: var(--callout-radius);
}
.zvi-special-tip-title {
  font-family: var(--font-heading);
  color: var(--color-link);
  margin: 0 0 20px 0;
  line-height: 1.2;
  font-size: 2rem;
  font-weight: 700;
}
/* top 5 */
.fr-top-5-box { text-align: center; background: color-mix(in srgb, var(--color-link) 4%, #fff); }
.fr-top-5-box h3 {
  font-family: var(--font-heading);
  color: var(--color-link);
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 22px 0;
  line-height: 1.2;
  position: relative;
  padding-bottom: 18px;
}
.fr-top-5-box h3::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 3px;
  background: var(--accent-red);
  border-radius: 2px;
}
/* קופון */
.coupon-box {
  text-align: center;
  border: 2px dashed var(--color-link);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-link) 4%, #fff) 0 24px, #fff 24px 48px);
  overflow: hidden;
}
.coupon-box::before, .coupon-box::after {
  content: "";
  position: absolute; top: 50%;
  width: 22px; height: 22px;
  background: #fff;
  border: 2px dashed var(--color-link);
  border-radius: 50%;
  transform: translateY(-50%);
}
.coupon-box::before { inset-inline-start: -13px; }
.coupon-box::after { inset-inline-end: -13px; }
.coupon-code {
  position: relative; z-index: 1;
  background: #fff;
  padding: 12px 32px;
  border: 2px dashed var(--accent-red);
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--accent-red);
  letter-spacing: 2px;
  display: inline-block;
  margin: 15px 0;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
@media (max-width: 768px) {
  blockquote, .wp-block-quote, .tip-box, .fr-tip-box, .coupon-box, .fr-top-5-box, .zvi-special-tip-box {
    padding: 20px;
    margin: 30px 0;
  }
  .zvi-special-tip-title { font-size: 1.6rem; }
  .fr-top-5-box h3 { font-size: 2rem; }
}
.zvi-faq-container {
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.zvi-faq-item,
.zvi-faq-clean details {
  background-color: var(--card-bg-color);
  border: 1px solid var(--sb-border);
  border-radius: var(--card-border-radius);
  overflow: hidden;
  transition: var(--card-transition);
}
.zvi-faq-item:hover,
.zvi-faq-clean details:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: color-mix(in srgb, var(--color-link) 25%, var(--sb-border));
}
.zvi-faq-item summary,
.zvi-faq-clean summary {
  padding: 20px var(--card-padding);
  cursor: pointer;
  color: var(--color-link);
  font-size: 1.15rem;
  background-color: var(--callout-bg);
  font-family: var(--font-body);
  font-weight: 700;
  list-style: none;
  outline: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.zvi-faq-item summary::-webkit-details-marker,
.zvi-faq-clean summary::-webkit-details-marker {
  display: none;
}
.zvi-faq-item summary:hover,
.zvi-faq-clean summary:hover {
  background-color: color-mix(in srgb, var(--color-link) 8%, var(--callout-bg));
}
.zvi-faq-item summary:focus-visible,
.zvi-faq-clean summary:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: -2px;
}
.zvi-faq-item summary::after,
.zvi-faq-clean summary::after {
  content: '+';
  color: var(--accent-red);
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}
.zvi-faq-item[open] summary,
.zvi-faq-clean details[open] summary {
  background-color: var(--color-link);
  color: #ffffff;
}
.zvi-faq-item[open] summary::after,
.zvi-faq-clean details[open] summary::after {
  transform: rotate(45deg);
  color: #ffffff;
}
.zvi-faq-content,
.zvi-faq-item[open] > div,
.zvi-faq-clean details[open] > div {
  padding: var(--card-padding);
  border-top: 1px solid var(--sb-border);
  color: var(--color-text-main);
  line-height: 1.6;
  font-size: 1.05rem;
  background-color: var(--card-bg-color);
  animation: faqFadeIn 0.4s ease forwards;
}
.zvi-faq-content p:last-child {
  margin-block-end: 0;
}
@media (prefers-reduced-motion: reduce) {
  .zvi-faq-content,
  .zvi-faq-item[open] > div,
  .zvi-faq-clean details[open] > div {
    animation: none;
  }
}
/* ===== "בקצרה" — תיבת תקציר GEO (נשענת על מערכת ה-FAQ) ===== */
.zvi-brief {
  margin: 0 0 32px;
}
.zvi-brief .zvi-brief-item summary {
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.zvi-brief-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.zvi-brief-label::before {
  content: '';
  width: 22px;
  height: 2px;
  background-color: var(--accent-red);
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}
.zvi-brief .zvi-brief-item[open] summary .zvi-brief-label::before {
  background-color: #ffffff;
}
.zvi-brief .zvi-brief-lead {
  font-weight: 600;
  margin-block-start: 0;
  margin-block-end: 16px;
}
.zvi-brief .zvi-faq-content ul {
  margin: 0;
  padding-inline-start: 1.15em;
  list-style: none;
}
.zvi-brief .zvi-faq-content li {
  position: relative;
  margin-bottom: 12px;
  line-height: 1.65;
}
.zvi-brief .zvi-faq-content li::before {
  content: '';
  position: absolute;
  inset-inline-start: -1.15em;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-red);
}
.zvi-brief .zvi-faq-content li:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .zvi-brief { margin-bottom: 26px; }
  .zvi-brief .zvi-brief-item summary { font-size: 1rem; }
}

.fr-museum-row, .zvi-pass-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--card-bg-color);
    padding: 24px;
    margin-bottom: 28px;
    border-radius: var(--card-border-radius);
    border: 1px solid var(--sb-border);
    gap: 24px;
    box-shadow: var(--card-shadow-base);
    transition: var(--card-transition);
    position: relative;
    overflow: hidden;
}
.hotel-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #EDEDEA;
    transition: var(--card-transition);
}
.hotel-row:last-child { border-bottom: none; padding-bottom: 0; }
.hotel-row:first-child { padding-top: 0; }
/* עוטף שורות המלון בכרטיס אחיד, כמו שאר האלמנטים */
.hotel-list {
    background: #ffffff;
    border-radius: var(--card-border-radius);
    border: 1px solid var(--sb-border);
    box-shadow: var(--card-shadow-base);
    padding: 6px 24px;
    margin-bottom: 28px;
}
.fr-museum-row:hover, .zvi-pass-card:hover, .hotel-row:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
}
.fr-museum-row { border-inline-start: 4px solid var(--accent-red); }
.zvi-pass-card {
    background: linear-gradient(135deg, #ffffff 0%, #F4F4F4 100%);
    border: 2px solid var(--color-link);
    margin-top: 40px;
    flex-direction: column;
    align-items: stretch;
}
.zvi-pass-card::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--color-link), var(--color-link-hover));
}
.zvi-pass-card .zvi-pass-main { display: flex; align-items: center; gap: 20px; }
.zvi-pass-desc { margin-bottom: 0; }
.zvi-pass-card .zvi-hero-buttons { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; align-items: stretch; }
.zvi-pass-card .zvi-ticket-btn { flex: 1; min-width: 200px; box-sizing: border-box; margin: 0; display: flex; align-items: center; justify-content: center; }
/* עיגולי רקע לאייקונים - עקביות חזותית עם zvi-pass-icon */
.fr-att-icon, .hotel-icon, .zvi-pass-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.fr-att-icon { width: 64px; height: 64px; background: rgba(207, 56, 52, 0.08); font-size: 2rem; }
.hotel-icon { width: 52px; height: 52px; min-width: 52px; background: rgba(79, 100, 176, 0.08); color: var(--color-link); font-size: 1.5rem; }
.zvi-pass-icon { width: 84px; height: 84px; background: #fff; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border: 1px solid var(--sb-border); font-size: 2.75rem; }
.fr-att-details, .hotel-details, .zvi-pass-content { flex-grow: 1; text-align: start; }
.fr-att-title, .zvi-pass-title {
    font-family: var(--font-heading);
    color: var(--color-link);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 6px 0;
    display: block;
    line-height: 1.2;
}
.hotel-title { font-weight: 700; font-size: 1.15rem; color: var(--color-link); display: block; margin-bottom: 3px; }
.fr-att-desc, .hotel-desc, .zvi-pass-desc { font-size: 1rem; color: var(--color-text-main); line-height: 1.5; margin: 0; }
.hotel-desc { font-size: 0.95rem; color: var(--color-text-muted); }
.fr-att-btn, .hotel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background-color: var(--color-link);
    color: #ffffff;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border-radius: var(--btn-border-radius);
    font-family: var(--font-heading);
    font-weight: 600;
    text-decoration: none;
    transition: var(--btn-transition);
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(21, 57, 155, 0.18);
}
.fr-att-btn { background-color: var(--accent-red); box-shadow: 0 4px 10px rgba(207, 56, 52, 0.18); }
.fr-att-btn:hover { background-color: #b02a27; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(207, 56, 52, 0.3); }
.hotel-btn:hover { background-color: var(--color-link-hover); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(21, 57, 155, 0.3); }
.att-sub-link { display: inline-block; margin-top: 10px; font-size: 0.9rem; color: var(--accent-red); text-decoration: underline; transition: color 0.3s; }
.att-sub-link:hover { color: #b02a27; }
@media (max-width: 768px) {
    /* תיקון CRO/UX (מובייל): .fr-museum-row ו-.hotel-row נשארות עכשיו אופקיות במובייל בכוונה
       (אייקון/תמונה + טקסט זה לצד זה, כמו בדסקטופ) במקום להיערם לעמודה אנכית — כך רואים יותר
       אטרקציות/מלונות על המסך בבת אחת וגוללים פחות. .zvi-pass-card (כרטיס פרומו בודד, לא רשימה
       לסריקה) ממשיכה להתרוחב לעמודה כמו קודם. */
    .zvi-pass-card { flex-direction: column; text-align: center; gap: 16px; }
    .zvi-pass-card .zvi-pass-main { flex-direction: column; }
    .zvi-pass-content { text-align: center; }

    .fr-museum-row, .hotel-row {
        gap: 14px;
        padding-block: 14px;
    }
    .fr-att-icon { width: 52px; height: 52px; font-size: 1.6rem; }
    .hotel-icon { width: 44px; height: 44px; min-width: 44px; font-size: 1.25rem; }
    .fr-att-title { font-size: 1.3rem; }
    .hotel-title { font-size: 1.05rem; }
    .fr-att-desc, .hotel-desc { font-size: 0.9rem; }
    .fr-att-btn, .hotel-btn {
        width: auto;
        display: inline-flex;
        flex-shrink: 0;
        padding: 10px 16px;
        min-height: 44px;
        font-size: 0.9rem;
    }
}
.zvi-ticket-btn.dark-variant { background-color: #2c3e50; border-color: #2c3e50; box-shadow: 0 4px 10px rgba(44, 62, 80, 0.18); }
.zvi-ticket-btn.dark-variant:hover { background-color: #1a252f; border-color: #1a252f; box-shadow: 0 6px 14px rgba(44, 62, 80, 0.3); }
.zvi-uni-iframe { position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; border: none; }
/* =========================================
   ZVI POSTS GRID - EXCLUSIVE CSS (IMPROVED)
   ========================================= */
/* --- 1. הפילטר (Dropdown) --- */
.zvi-filter-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
    width: 100%;
}
.zvi-filter-dropdown {
    appearance: none;
    -webkit-appearance: none;
    background-color: #ffffff;
    border: 2px solid var(--color-link);
    color: var(--color-link);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    padding-block: 13px; /* היה 10px — גובה גבולי מתחת ל-44px, כעת עובר בבטחה */
    padding-inline-start: 20px;
    padding-inline-end: 40px;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--btn-transition);
    width: 100%;
    max-width: 350px;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%234F64B0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: left 15px top 50%;
    background-size: 12px auto;
}
.zvi-filter-dropdown:hover {
    border-color: var(--color-link-hover);
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-link) 15%, transparent);
}
.zvi-filter-dropdown:focus-visible {
    outline: 2px solid var(--color-link-hover);
    outline-offset: 2px;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--color-link) 20%, transparent);
}
/* --- 2. כפתור "טען כתבות נוספות" --- */
.zvi-load-more-container {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 20px;
    width: 100%;
}
.zvi-load-more-btn {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    padding: 14px 20px;
    border-radius: 50px; /* aligned with the pill language used by the dropdown + card CTA */
    width: 100%;
    max-width: 350px;
    background-color: var(--color-link);
    color: #ffffff;
    border: 2px solid var(--color-link);
    cursor: pointer;
    transition: var(--btn-transition);
    text-align: center;
}
.zvi-load-more-btn:hover {
    background-color: var(--color-link-hover);
    border-color: var(--color-link-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px color-mix(in srgb, var(--color-link-hover) 25%, transparent);
}
.zvi-load-more-btn:focus-visible {
    outline: 2px solid var(--color-link-hover);
    outline-offset: 2px;
}
/* --- 3. עיצוב כרטיסי הפוסטים --- */
.zvi-grid-post-card {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg-color, #ffffff);
    border-radius: var(--card-border-radius, 16px);
    box-shadow: var(--card-shadow-base, 0 4px 15px rgba(0,0,0,0.05));
    border: 1px solid var(--sb-border, #D7D7D6);
    transition: var(--card-transition, transform 0.3s ease, box-shadow 0.3s ease);
    overflow: hidden;
    text-decoration: none;
    height: 100%;
    box-sizing: border-box;
}
.zvi-grid-post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover, 0 12px 25px rgba(0,0,0,0.12));
    border-color: color-mix(in srgb, var(--color-link) 35%, var(--sb-border));
}
.zvi-grid-post-card:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 3px;
}
.zvi-grid-post-img-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--sb-border, #D7D7D6);
    background-color: var(--bg-quote, #f5f5f5);
    margin: 0;
    padding: 0;
}
.zvi-grid-post-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.4s ease;
}
.zvi-grid-post-card:hover .zvi-grid-post-img-wrapper img {
    transform: scale(1.04);
}
.zvi-grid-post-content {
    padding: var(--card-padding, 24px);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 16px;
    align-items: center;
    text-align: center;
}
.zvi-grid-post-title {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
    font-weight: 700;
    color: var(--color-link);
    margin: 0;
    line-height: 1.3;
    text-align: center; /* תיקון: היה start (ימין) מכלל ה-h1-h6 הגלובלי, עכשיו ממורכז כמו הכפתור מתחתיו */
}
.zvi-grid-post-btn-wrapper {
    margin-top: auto;
    width: 100%;
    display: flex;
    justify-content: center;
}
.zvi-grid-post-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: var(--color-link);
    border: 2px solid var(--color-link);
    padding: 10px 24px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    text-decoration: none;
    transition: var(--btn-transition);
}
.zvi-grid-post-card:hover .zvi-grid-post-btn {
    background-color: var(--color-link);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-link) 30%, transparent);
}
/* =========================================
   Decision Table
   ========================================= */
.fr-decision-table, .decision-table-box {
    font-family: var(--font-body);
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 30px 0;
    font-size: clamp(15px, 1.5vw, 17px);
    color: var(--color-text-main);
    background-color: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow-base);
}
.decision-header {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #ffffff;
    letter-spacing: normal;
    padding: 18px 22px;
    text-align: start;
}
.fr-decision-table thead tr { font-family: var(--font-heading); background-color: var(--color-link); }
.fr-decision-table th { border-bottom: 2px solid rgba(0,0,0,0.08); }
.fr-decision-table td { padding: 16px 22px; border-bottom: 1px solid var(--sb-border); vertical-align: middle; }
.fr-decision-table tbody tr:last-child td { border-bottom: none; }
.fr-decision-table tbody tr:nth-of-type(even) { background-color: #FAFAF8; }
.fr-decision-table tbody tr:hover { background-color: rgba(79, 100, 176, 0.05); transition: background-color 0.2s ease; }
.decision-label { font-family: var(--font-heading); font-weight: 600; color: var(--color-text-main); white-space: nowrap; }
.decision-content { color: var(--color-text-faint-2); }
.decision-content a { color: var(--color-link); font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(79, 100, 176, 0.3); transition: color 0.2s ease, border-color 0.2s ease; }
.decision-content a:hover { color: var(--color-link-hover); border-bottom-color: var(--color-link-hover); }
@media (max-width: 600px) {
    .fr-decision-table, .fr-decision-table tbody, .fr-decision-table tr, .fr-decision-table td { display: block; width: 100%; box-sizing: border-box; }
    .fr-decision-table thead { display: none; }
    .fr-decision-table tbody tr { border-bottom: 1px solid var(--sb-border); padding: 14px 18px; }
    .fr-decision-table td { padding: 4px 0; border-bottom: none; }
    .decision-label { display: block; font-size: 0.85rem; color: var(--color-link); margin-bottom: 2px; }
}
/* =========================================
   Comparison Table
   ========================================= */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.5vw, 17px);
    color: var(--color-text-main);
    background-color: var(--sb-bg);
    box-shadow: var(--card-shadow-base);
    border-radius: var(--card-border-radius);
    overflow: hidden;
}
.comparison-table thead tr { background-color: var(--color-link); color: #ffffff; text-align: start; }
.comparison-table th { font-family: var(--font-heading); font-weight: 600; padding: 16px 20px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); white-space: nowrap; }
.comparison-table th:first-child { border-start-start-radius: var(--card-border-radius); }
.comparison-table th:last-child { border-start-end-radius: var(--card-border-radius); }
.comparison-table td { padding: 16px 20px; border-bottom: 1px solid var(--sb-border); vertical-align: middle; }
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:nth-of-type(even) { background-color: #FAFAF8; }
.comparison-table tbody tr:hover { background-color: rgba(79, 100, 176, 0.05); transition: background-color 0.2s ease; }
.comparison-table td a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    background-color: transparent;
    color: var(--color-link);
    border: 1.5px solid var(--color-link);
    border-radius: 50px;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}
.comparison-table td a:hover, .comparison-table td a:focus-visible {
    background-color: var(--color-link);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(79, 100, 176, 0.25);
    transform: translateY(-1px);
    outline: none;
}
@media (max-width: 768px) {
    .comparison-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--color-link) #f4f4f4; }
    .comparison-table::-webkit-scrollbar { height: 6px; }
    .comparison-table::-webkit-scrollbar-track { background: #f4f4f4; border-radius: 4px; }
    .comparison-table::-webkit-scrollbar-thumb { background-color: var(--color-link); border-radius: 4px; }
    .comparison-table th, .comparison-table td { padding: 12px 14px; font-size: 0.95rem; white-space: nowrap; }
    .comparison-table td a { padding: 6px 14px; font-size: 0.85rem; }
}
/* =========================================
   Social Share Wrapper
   ========================================= */
#zvi-social-unique-wrapper {
    margin: 60px auto;
    padding: 40px 20px;
    background-color: var(--bg-quote);
    border-radius: var(--card-border-radius);
    border: 1px solid var(--sb-border);
    text-align: center;
    max-width: 800px;
    box-sizing: border-box;
    box-shadow: var(--card-shadow-base);
}
#zvi-social-unique-wrapper .zvi-headers { margin-bottom: 30px; }
#zvi-social-unique-wrapper .zvi-sub-text { font-family: var(--font-body); font-size: 1.2rem; color: var(--color-text-faint-2); margin-bottom: 5px; }
#zvi-social-unique-wrapper .zvi-main-text { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: var(--color-link); line-height: 1.2; }
#zvi-social-unique-wrapper .zvi-flex-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; }
#zvi-social-unique-wrapper .zvi-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    background-color: #ffffff;
    border: 1px solid var(--sb-border);
    border-radius: 50px;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    direction: rtl;
}
#zvi-social-unique-wrapper .zvi-item:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); border-color: var(--color-link); }
#zvi-social-unique-wrapper .icon-box { display: flex; align-items: center; justify-content: center; }
#zvi-social-unique-wrapper .icon-box svg { width: 24px; height: 24px; fill: var(--color-text-main); transition: fill 0.3s ease; }
#zvi-social-unique-wrapper .zvi-item:hover .icon-box svg { fill: var(--color-link); }
#zvi-social-unique-wrapper .text-label { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; color: var(--color-text-main); transition: color 0.3s ease; }
#zvi-social-unique-wrapper .zvi-item:hover .text-label { color: var(--color-link); }
@media (max-width: 600px) {
    #zvi-social-unique-wrapper { padding: 30px 15px; }
    #zvi-social-unique-wrapper .zvi-main-text { font-size: 1.8rem; }
    #zvi-social-unique-wrapper .zvi-flex-row { flex-direction: column; gap: 15px; }
    #zvi-social-unique-wrapper .zvi-item { width: 100%; max-width: 300px; }
}
/* ==========================================================================
   Top Picks Component - Custom CSS (Desktop: RTL, Mobile: Centered)
   ========================================================================== */
/* מעטפת הרשימה */
.top-picks-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
  direction: rtl; 
  width: 100%;
  max-width: 800px;
  margin: 24px 0;
  font-family: inherit;
}
/* שורה בודדת - רקע לבן להתאמה לתמונות */
.top-pick-row {
  display: flex;
  flex-direction: row;
  align-items: center; /* יישור אנכי מושלם לכל פריטי השורה */
  justify-content: space-between;
  background-color: #ffffff; 
  border: 1px solid #eaeaea;
  border-radius: 12px;
  padding: 6px 16px; /* צומצם מ-12px ל-6px כדי להקטין את גובה הכרטיס */
  transition: all 0.2s ease-in-out;
}
/* אפקט ריחוף (Hover State) */
.top-pick-row:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: #d1d5db;
}
/* מעטפת התמונה */
.top-pick-number {
  min-width: 115px;
  height: 115px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* הסתרת המספר הטקסטואלי */
  color: transparent;
  font-size: 0;
  
  /* רקע גיבוי: אם התמונה איטית/נכשלת בטעינה, נשאר עיגול צבעוני במקום ריק לגמרי */
  background-color: var(--fa-bg-gray);
  border-radius: 50%;
  /* הגדרות רקע לתמונות */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* הזרקת התמונות כרקע לפי סדר השורות (1 עד 5) */
.top-pick-row:nth-child(1) .top-pick-number {
  background-image: url("https://www.francophilesanonymes.com/wp-content/uploads/2026/07/Character_with_blue_beret_202607071028.webp");
}
.top-pick-row:nth-child(2) .top-pick-number {
  background-image: url("https://www.francophilesanonymes.com/wp-content/uploads/2026/07/Replace_number_1_with_2_202607071035.webp");
}
.top-pick-row:nth-child(3) .top-pick-number {
  background-image: url("https://www.francophilesanonymes.com/wp-content/uploads/2026/07/Replace_number_2_with_3_202607071035.webp");
}
.top-pick-row:nth-child(4) .top-pick-number {
  background-image: url("https://www.francophilesanonymes.com/wp-content/uploads/2026/07/Replace_number_3_with_4_202607071035.webp");
}
.top-pick-row:nth-child(5) .top-pick-number {
  background-image: url("https://www.francophilesanonymes.com/wp-content/uploads/2026/07/Replace_4_with_5_202607071035.webp");
}
/* תמונת הדירוג המקורית - מוסתרת למניעת כפילויות */
.top-pick-image {
  width: 100%;
  max-width: 95px;
  height: auto;
  object-fit: contain;
  display: none; 
}
/* אזור התוכן המרכזי */
.top-pick-content {
  flex-grow: 1;
  padding: 0 20px;
  text-align: right; 
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* כותרת האטרקציה/מלון */
.top-pick-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.3;
  text-align: right; 
}
/* תיאור האטרקציה */
.top-pick-desc {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: #555555;
  line-height: 1.4;
  text-align: right; 
}
/* מעטפת הכפתור */
.top-pick-action {
  flex-shrink: 0;
  align-self: center;
}
/* כפתור הקריאה לפעולה */
.top-pick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-link); /* היה #5162a6 קבוע — מאוחד עכשיו לכחול המותג */
  color: #ffffff;
  text-decoration: none;
  padding: 12px 20px; /* היה 10px — גובה סופי ~39px, נכשל ביעד מגע 44px */
  min-height: 44px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.2s ease;
  white-space: nowrap;
}
.top-pick-btn:hover {
  background-color: var(--color-link-hover); /* היה #3f4e85 קבוע */
  color: #ffffff;
}
/* ==========================================================================
   Responsive adjustments (Mobile View — Stacked & Centered)
   עדכון: במובייל השורה נשברת לעמודה אחת — אייקון, טקסט וכפתור
   זה מעל זה, הכל ממורכז. בדסקטופ לא משתנה דבר.
   ========================================================================== */
@media (max-width: 600px) {
  .top-pick-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 14px;
    gap: 12px;
  }

  .top-pick-number {
    min-width: 86px;
    height: 86px;
    margin: 0 auto;
  }

  .top-pick-content {
    width: 100%;
    padding: 0;
    align-items: center;
    text-align: center;
  }

  .top-pick-title {
    font-size: 1.05rem;
    text-align: center;
  }

  .top-pick-desc {
    font-size: 0.9rem;
    text-align: center;
    margin-top: 6px;
  }

  .top-pick-action {
    width: 100%;
    align-self: center;
  }

  .top-pick-btn {
    display: flex;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 12px 16px;
    font-size: 0.95rem;
    white-space: normal;
  }
}
/* =========================================
   כרטיסים - עיצוב מחודש (סגנון 1A: נקי ומינימלי)
   מחליף את בלוק ה-CSS המקורי של הכרטיסים.
   משתמש במשתנים הקיימים כבר ב-:root שלך (צבעים, פונטים, צללים).
   ========================================= */
.zvi-smart-grid, .zvi-flex-grid, .hotels-links-container, .hotel-card-container,
.zvi-latest-posts-wrapper ul.hotel-card-container, .latest-posts-section ul.hotel-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 28px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: stretch;
    list-style: none;
    padding: 0;
}
@media (max-width: 768px) {
    .zvi-smart-grid, .zvi-flex-grid, .hotels-links-container, .hotel-card-container,
    .zvi-latest-posts-wrapper ul.hotel-card-container, .latest-posts-section ul.hotel-card-container {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 1025px) {
    .zvi-archive-container {
        padding-right: 120px;
        padding-left: 120px;
    }
}
/* ---------- כרטיס בסיס ---------- */
.zvi-uni-card, .fa-product-card, .zvi-article-card, .tip-card, .zvi-hotel-card, .zvi-ticket-card,
.zvi-latest-posts-wrapper ul.hotel-card-container li, .latest-posts-section ul.hotel-card-container li,
.zvi-flex-item .zvi-article-card, .comment-body, .no-tips {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background-color: var(--card-bg-color);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow-base);
    border: 1px solid var(--sb-border);
    transition: var(--card-transition);
    overflow: hidden;
    text-decoration: none;
    height: 100%;
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 0;
    position: relative;
}
.zvi-uni-card:hover, .fa-product-card:hover, .zvi-article-card:hover, .tip-card:hover,
.zvi-hotel-card:hover, .zvi-ticket-card:hover,
.zvi-latest-posts-wrapper ul.hotel-card-container li:hover,
.latest-posts-section ul.hotel-card-container li:hover,
.zvi-flex-item .zvi-article-card:hover, .comment-body:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--color-link);
}
/* ---------- תמונה: מלאה, פינות עליונות בלבד ---------- */
.zvi-uni-image-wrapper, .zvi-hotel-img, .zvi-card-img, .fa-product-card .fa-card-img,
.zvi-article-card .zvi-related-article-img, .latest-posts-section ul.hotel-card-container li img,
.zvi-latest-posts-wrapper ul.hotel-card-container li img, .zvi-hotel-img a img,
.entry-content .zvi-hotel-card img, .entry-content .zvi-uni-card img,
.entry-content .zvi-article-card img, .entry-content .fa-product-card img,
.entry-content .zvi-ticket-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
    line-height: 0;
    background-color: var(--callout-bg, #F4F4F4);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--sb-border);
    object-fit: cover;
    object-position: center;
    border-radius: 0;
    margin: 0;
    height: auto;
}
.zvi-uni-image-wrapper img, .zvi-uni-image-wrapper a img,
.entry-content .zvi-uni-image-wrapper img, .entry-content .zvi-uni-image-wrapper a img,
.zvi-hotel-img a {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
    margin: 0;
}
/* ---------- תוכן: ממורכז, ריווח נדיב ---------- */
.zvi-uni-content, .fa-card-content, .zvi-hotel-content, .tip-card .tip-body,
.zvi-article-card .zvi-related-article-content, .latest-posts-section ul.hotel-card-container li p,
.latest-posts-section ul.hotel-card-container li span:not([class*="-btn"]) {
    padding: var(--card-padding);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
    gap: 16px;
    align-items: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.latest-posts-section ul.hotel-card-container li p,
.latest-posts-section ul.hotel-card-container li span:not([class*="-btn"]) {
    padding: 0 var(--card-padding);
    margin-bottom: 16px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-main);
    line-height: 1.6;
}
/* ---------- כותרת כרטיס ---------- */
.zvi-uni-title, .fa-card-title, .zvi-hotel-title, .zvi-ticket-title, .zvi-art-title,
.zvi-related-article-title, .latest-posts-section ul.hotel-card-container li strong,
.zvi-latest-posts-wrapper ul.hotel-card-container li strong {
    font-family: var(--font-heading);
    font-size: clamp(22px, 4vw, 26px);
    font-weight: 700;
    color: var(--color-link);
    margin: 0;
    line-height: 1.3;
    padding: 0;
    width: 100%;
    text-align: center;
    display: block;
}
.latest-posts-section ul.hotel-card-container li strong,
.zvi-latest-posts-wrapper ul.hotel-card-container li strong {
    padding: 0 var(--card-padding);
    margin-bottom: 12px;
}/* ---------- תיאור ---------- */
.zvi-uni-desc,
.zvi-ticket-desc,
.zvi-art-desc,
.tip-body p
{
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.6;
}
/* ---------- קופסת יתרונות/חסרונות (רקע אפור בהיר, פינות עדינות) ---------- */
.zvi-uni-features, .fa-pros-cons {
    background-color: var(--callout-bg, #F4F4F4);
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}
.zvi-uni-features ul, .fa-pros-cons ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zvi-uni-features li, .fa-pros-cons li {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--color-text-main);
    position: relative;
    padding-inline-start: 24px;
    text-align: start;
    line-height: 1.4;
    margin: 0;
}
.zvi-uni-features li.pro::before, .fa-pros-cons li.fa-pro::before {
    content: '✓';
    color: var(--color-link);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    font-weight: 900;
    font-size: 1.1rem;
}
.zvi-uni-features li.con::before, .fa-pros-cons li.fa-con::before {
    content: '✕';
    color: var(--accent-red);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    font-weight: 900;
    font-size: 1.1rem;
}
.fa-pros-cons p:empty { display: none; }
/* ---------- אזור פעולות: כפתורים מוערמים, ממורכזים ---------- */
.zvi-uni-actions, .zvi-btn-group, .zvi-card-btn-wrapper, .fa-card-footer,
.zvi-related-article-btn-wrapper, .zvi-btns-container,
.zvi-latest-posts-wrapper ul.hotel-card-container li > div:last-child,
.latest-posts-section ul.hotel-card-container li > div:last-child {
    margin-top: auto;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0;
    box-sizing: border-box;
}
.zvi-uni-actions > a, .zvi-btn-group > a, .fa-card-footer > a, .zvi-card-btn-wrapper > a { margin-top: 0; }
/* ---------- כפתור פסיל שקוף (ראשי לביקורת/מידע) ---------- */
.zvi-uni-btn-outline, .zvi-art-btn,
.latest-posts-section ul.hotel-card-container li > div:last-child span,
.latest-posts-section ul.hotel-card-container li > div:last-child a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: var(--color-link);
    border: 2px solid var(--color-link);
    padding: 11px 24px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    line-height: 1.2;
    white-space: normal;
}
.zvi-uni-btn-outline:hover, .zvi-art-btn:hover, .zvi-article-card:hover .zvi-art-btn,
.zvi-uni-card:hover .zvi-uni-btn-outline, .fa-product-card:hover .zvi-uni-btn-outline,
.tip-card:hover .zvi-uni-btn-outline, .zvi-hotel-card:hover .zvi-uni-btn-outline,
.zvi-ticket-card:hover .zvi-uni-btn-outline,
.latest-posts-section ul.hotel-card-container li:hover > div:last-child span,
.latest-posts-section ul.hotel-card-container li:hover > div:last-child a {
    background-color: rgba(79, 100, 176, 0.06);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 100, 176, 0.15);
    color: var(--color-link);
}
/* ---------- כפתור מלא (ראשי לפעולה עיקרית) ---------- */
/* zvi-ticket-btn: הכפתור הכחול בפועל באתר (בכרטיסי zvi-hotel-card) - מתאים ברוחב לכפתור הלבן */
.zvi-uni-btn-solid, .zvi-ticket-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-link);
    color: #ffffff;
    border: 2px solid var(--color-link);
    padding: 11px 24px;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
}
.zvi-uni-btn-solid:hover, .zvi-ticket-btn:hover, .zvi-uni-card:hover .zvi-uni-btn-solid, .fa-product-card:hover .zvi-uni-btn-solid,
.tip-card:hover .zvi-uni-btn-solid, .zvi-hotel-card:hover .zvi-uni-btn-solid, .zvi-hotel-card:hover .zvi-ticket-btn,
.zvi-ticket-card:hover .zvi-uni-btn-solid {
    background-color: var(--color-link-hover);
    border-color: var(--color-link-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(21, 57, 155, 0.25);
    color: #ffffff;
}
/* ---------- טקסט משנה מתחת לכפתורים ---------- */
.zvi-uni-subtext, .fa-trust-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-faint-2);
    text-align: center;
    margin: -3px 0 0 0;
    display: block;
}
/* ---------- אייקון גדול (לכרטיסי טיפים/כרטיסים ללא תמונה) ---------- */
.zvi-icon-placeholder, .zvi-ticket-icon, .zvi-art-icon {
    font-size: 3.2rem;
    text-align: center;
    margin-bottom: 8px;
    line-height: 1;
    transition: transform 0.3s ease;
}
.zvi-uni-card:hover .zvi-icon-placeholder, .zvi-uni-card:hover .zvi-ticket-icon, .zvi-uni-card:hover .zvi-art-icon {
    transform: scale(1.1);
}
/* מירכוז כותרת "5 דברים שלא ידעתם על הפרנקופיל" */
.fr-top-5-box h3 {
    text-align: center;
}
/* =========================================
   FA STAT CARDS — "פרנקופילים אנונימיים במספרים"
   ========================================= */
.fa-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 20px;
    margin: 24px 0;
}
.fa-stat-card {
    background: var(--sb-bg);
    border: 1px solid var(--sb-border);
    border-radius: var(--card-border-radius);
    padding: 30px 22px;
    text-align: center;
    box-shadow: var(--card-shadow-base);
    transition: var(--card-transition);
}
.fa-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--color-link);
}
.fa-stat-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2.2rem, 4vw, 2.8rem);
    line-height: 1;
    color: var(--color-link);
}
.fa-stat-card.is-red .fa-stat-num { color: var(--accent-red); }
.fa-stat-label {
    margin-top: 12px;
    font-size: 1.05rem;
    color: var(--color-text-muted);
    font-weight: 600;
    line-height: 1.4;
}
.fa-stat-note {
    font-size: 0.82rem;
    color: var(--color-text-faint);
    margin-top: 6px;
}
@media (max-width: 600px) {
    .fa-stat-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   39. תיקוני CRO/UX למובייל — כרטיסי מלונות ואטרקציות
   (זוהי תוספת חדשה בלבד; שום כלל קיים מעל לא נמחק או שונה
   מלבד 3 העדכונים הממוקדים שכבר מסומנים למעלה בהערות "תיקון CRO/UX").
   כל הכללים כאן ממוקדים במפורש ל-.zvi-hotel-card / .zvi-ticket-card
   (ולא לבסיס המשותף .zvi-uni-card/.tip-card/.zvi-article-card/.comment-body
   וכו') כדי לא להשפיע על סוגי תוכן אחרים שחולקים את אותו עיצוב בסיס.
   ========================================================= */
@media (max-width: 768px) {
    /* צמצום ריפוד/מרווח פנימי — פחות גובה מבוזבז לכרטיס */
    .zvi-hotel-card .zvi-uni-content,
    .zvi-ticket-card .zvi-uni-content {
        padding: 18px;
        gap: 12px;
    }

    /* יישור טקסט להתחלה במקום מרכוז — חוסך גובה בכותרות/תיאורים ארוכים וקריא יותר לסריקה */
    .zvi-hotel-card .zvi-uni-content,
    .zvi-ticket-card .zvi-uni-content {
        align-items: flex-start;
        text-align: start;
    }
    .zvi-hotel-card .zvi-uni-title,
    .zvi-ticket-card .zvi-uni-title,
    .zvi-hotel-card .zvi-hotel-title,
    .zvi-ticket-card .zvi-ticket-title,
    .zvi-hotel-card .zvi-uni-desc,
    .zvi-ticket-card .zvi-uni-desc,
    .zvi-hotel-card .zvi-art-desc,
    .zvi-ticket-card .zvi-art-desc {
        text-align: start;
        width: 100%;
    }

    /* קופסת יתרונות/חסרונות — ריפוד ומרווחים צפופים יותר בכרטיסי מלון/אטרקציה בלבד */
    .zvi-hotel-card .fa-pros-cons,
    .zvi-ticket-card .fa-pros-cons {
        padding: 12px 14px;
    }
    .zvi-hotel-card .fa-pros-cons li,
    .zvi-ticket-card .fa-pros-cons li {
        margin-bottom: 6px;
    }

    /* כפתור ה-CTA הראשי — רוחב מלא ביחס לתוכן הכרטיס במקום מוגבל ל-320px וממורכז.
       יעד מגע גדול יותר וברור יותר, תואם לדפוס המוכר מאתרי הזמנות. */
    .zvi-hotel-card .zvi-uni-btn-solid,
    .zvi-hotel-card .zvi-ticket-btn,
    .zvi-ticket-card .zvi-uni-btn-solid,
    .zvi-ticket-card .zvi-ticket-btn {
        max-width: none;
    }

    /* כפתור ה-CTA המשני — הופך לקישור טקסט קליל במקום כפתור-פסיל מלא, כדי לא
       להתחרות ויזואלית בכפתור הראשי וכדי לחסוך גובה נוסף בערימת הכפתורים. */
    .zvi-hotel-card .zvi-uni-btn-outline,
    .zvi-hotel-card .zvi-art-btn,
    .zvi-ticket-card .zvi-uni-btn-outline,
    .zvi-ticket-card .zvi-art-btn {
        max-width: none;
        width: auto;
        border: none;
        background-color: transparent;
        padding: 6px 4px;
        box-shadow: none;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .zvi-hotel-card:hover .zvi-uni-btn-outline,
    .zvi-hotel-card .zvi-uni-card:hover .zvi-uni-btn-outline,
    .zvi-ticket-card:hover .zvi-uni-btn-outline,
    .zvi-hotel-card:hover .zvi-art-btn,
    .zvi-ticket-card:hover .zvi-art-btn {
        background-color: transparent;
        transform: none;
        box-shadow: none;
    }
}

/* ---------------------------------------------------------
   מודיפייר אופציונלי (Opt-in): "מצב דחוס" — 2 טורים במובייל
   לרשימות ארוכות של מלונות/אטרקציות שרוצים להציג בבת אחת.
   לא פעיל אוטומטית על אף כרטיס קיים באתר — כדי להפעיל, יש להוסיף
   בתבנית את המחלקה zvi-grid-compact-mobile לקונטיינר הרשת עצמו,
   למשל: <ul class="hotel-card-container zvi-grid-compact-mobile">
   רק במקומות שבהם רוצים את תצוגת ה"רשימת חיפוש" הצפופה הזו.
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .zvi-grid-compact-mobile {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .zvi-grid-compact-mobile .zvi-hotel-card .zvi-uni-content,
    .zvi-grid-compact-mobile .zvi-ticket-card .zvi-uni-content,
    .zvi-grid-compact-mobile .zvi-uni-card .zvi-uni-content {
        padding: 12px;
        gap: 8px;
    }
    .zvi-grid-compact-mobile .zvi-uni-title,
    .zvi-grid-compact-mobile .zvi-hotel-title,
    .zvi-grid-compact-mobile .zvi-ticket-title {
        font-size: 1.05rem;
    }
    .zvi-grid-compact-mobile .fa-pros-cons {
        display: none; /* בתצוגה דחוסה מסתירים יתרונות/חסרונות — נשארים עם המידע הכי חשוב להחלטה מהירה */
    }
    .zvi-grid-compact-mobile .zvi-uni-btn-outline,
    .zvi-grid-compact-mobile .zvi-art-btn {
        display: none; /* כפתור פעולה אחד בלבד בתצוגה דחוסה */
    }
    .zvi-grid-compact-mobile .zvi-uni-btn-solid,
    .zvi-grid-compact-mobile .zvi-ticket-btn {
        font-size: 0.85rem;
        padding: 8px 10px;
        max-width: none;
    }
}

/* =========================================================
   40. ZVI HOTEL CATEGORY CARDS — כרטיסי "סוגי מלונות"
   (מחליף את .comparison-table בחלקים כמו "מלונות רומנטיים",
   "מלונות במרכז פריז", "מלונות בוטיק", "מלונות 5 כוכבים" וכו')
   כל הצבעים/פונטים/צללים ממוחזרים מהמשתנים הקיימים ב-:root.
   הכותרת (h2) והטקסט המקדים יושבים בתוך הכרטיס עצמו, וכל התוכן
   בכרטיס מיושר לימין (RTL). ברירת המחדל: 2 כרטיסים זה לצד זה
   בדסקטופ (עטיפה ב-.zvi-cat-grid), טור אחד במובייל.
   ========================================================= */
.zvi-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 30px 0;
    width: 100%;
}
.zvi-cat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    gap: 12px;
    width: 100%;
    max-width: 460px;
    margin: 24px auto;
    background-color: var(--card-bg-color, #ffffff);
    border: 1px solid var(--sb-border);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow-base);
    transition: var(--card-transition);
    padding: var(--card-padding);
    box-sizing: border-box;
}
.zvi-cat-grid .zvi-cat-card {
    max-width: none;
    margin: 0;
    height: 100%;
}
.zvi-cat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
    border-color: color-mix(in srgb, var(--color-link) 30%, var(--sb-border));
}
.zvi-cat-card-title {
    font-family: var(--font-heading);
    color: var(--color-link);
    font-size: clamp(1.3rem, 2vw, 1.5rem);
    font-weight: 800;
    margin: 0;
    line-height: 1.3;
    text-align: right;
    width: 100%;
}
.zvi-cat-card-desc {
    width: 100%;
    margin: 0;
}
.zvi-cat-card-desc p {
    font-family: var(--font-body);
    color: var(--color-text-muted, #565c69);
    font-size: 0.98rem;
    line-height: 1.65;
    text-align: right;
    margin: 0 0 8px;
}
.zvi-cat-card-desc p:last-child {
    margin-bottom: 0;
}
/* "קרא עוד": בזמן שה-details סגור, התיאור מצומצם ל-2 שורות בלבד.
   בדיוק אותו מנגנון (details/summary + :has) שכבר קיים ב-.zvi-booking-card. */
.zvi-cat-card:has(.zvi-cat-card-details:not([open])) .zvi-cat-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zvi-cat-card-details {
    width: 100%;
    margin: 0;
}
.zvi-cat-card-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    color: var(--color-link);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    list-style: none;
    user-select: none;
    width: fit-content;
    padding: 7px 16px;
    border-radius: 20px;
    background-color: var(--bg-quote, #f5f7ff);
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.zvi-cat-card-summary::-webkit-details-marker {
    display: none;
}
.zvi-cat-card-summary:hover {
    color: var(--color-link-hover);
    background-color: rgba(79, 100, 176, 0.1);
    border-color: rgba(79, 100, 176, 0.25);
    transform: translateY(-1px);
}
.zvi-cat-card-summary::after {
    content: '';
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin-bottom: 2px;
    flex-shrink: 0;
}
.zvi-cat-card-details[open] .zvi-cat-card-summary::after {
    transform: rotate(-135deg);
    margin-bottom: -2px;
}
.zvi-cat-pill-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    margin-bottom: 0;
}
/* הגנה: אם וורדפרס (wpautop) עוטף כל קישור-כדור בתגית <p> משלו כי יש שורה
   ריקה ביניהם בעורך, ל-<p> הזה יש margin-block-end גלובלי של 1.5em שנערם
   מעל ה-gap שלמעלה ויוצר את המרווח הענק בין הכדורים. השורה הזו מנטרלת את זה. */
.zvi-cat-pill-list p {
    margin: 0;
    display: contents;
}
.zvi-cat-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--fa-purple-soft, #eef1fa);
    color: var(--color-link);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 9px 22px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
    max-width: 100%;
    box-sizing: border-box;
    line-height: 1.3;
}
.zvi-cat-pill:hover {
    background-color: #ffffff;
    border-color: var(--color-link);
    transform: translateY(-1px);
    color: var(--color-link-hover);
}
.zvi-cat-pill-stars {
    color: var(--fa-amber);
    letter-spacing: 1px;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.zvi-cat-card-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--color-link);
    border: 2px solid var(--color-link);
    padding: 11px 28px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--btn-transition);
}
.zvi-cat-card-btn:hover {
    background-color: var(--color-link);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-link) 25%, transparent);
}
@media (max-width: 768px) {
    .zvi-cat-grid { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 600px) {
    .zvi-cat-card { padding: 22px 18px; margin: 20px auto; }
    .zvi-cat-pill { font-size: 0.9rem; padding: 8px 18px; }
}

/* =========================================================
   41. שכבת UI/UX + AI-READINESS — יולי 2026
   נוספה בסוף הקובץ בכוונה: אפס מחיקות, אפס inline CSS,
   וכל דריסה מסתמכת על סדר הקסקדה במקום על העלאת ספציפיות.
   הפונטים (Heebo / Assistant) והפלטה (כחול/לבן/אדום/שחור/אפור) לא שונו.
   ========================================================= */

/* ---------------------------------------------------------
   41.1 משקלי גופן אמיתיים — סוף ל-faux bold
   בקובץ נעשה שימוש ב-600 (17 פעמים), 700 (36), 800 (20) ו-900 (2),
   אבל נטענו רק Assistant 400 ו-Heebo 500. כל השאר סונתז ע"י הדפדפן
   ("הדגשה מזויפת") — אותיות עבריות מעוותות ורוחב לא צפוי.
   --------------------------------------------------------- */
@font-face {
    font-family: 'Heebo';
    src: url('https://www.francophilesanonymes.com/wp-content/uploads/2026/01/Heebo-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------
   41.2 טוקנים מאחדים
   קודם היו שש הגדרות צל מקבילות ותשעה רדיוסים שונים.
   כאן נקבע סולם אחד, והטוקנים הכפולים מצביעים אליו.
   --------------------------------------------------------- */
:root {
    --elev-1: 0 4px 15px rgba(20, 22, 40, .05);
    --elev-2: 0 8px 24px rgba(20, 22, 40, .07);
    --elev-3: 0 16px 44px rgba(20, 22, 40, .10);
    --elev-1-hover: 0 12px 28px rgba(20, 22, 40, .11);

    --radius-pill: 999px;

    /* ברירת מחדל בטוחה: אלמנט שמקבל var() של color-mix ללא תמיכה
       מקבל currentColor — וב-h2 זה היה קו אדום במקום כחול עדין. */
    --rule-soft: rgba(79, 100, 176, .12);
    --rule-link: rgba(79, 100, 176, .32);
    --tint-link: rgba(79, 100, 176, .09);

    --focus-ring-width: 3px;
    --focus-ring-color: var(--color-link-hover);
    --focus-ring-offset: 3px;

    /* זהו הבורג היחיד כאן שכדאי לכייל בעין מול ההדר בפועל */
    --anchor-offset: 96px;
}
@media (max-width: 768px) {
    :root { --anchor-offset: 72px; }
}

/* שדרוג ל-color-mix רק אם הדפדפן באמת תומך — כך הנגזרות
   ובאות מ-var(--color-link) ולא ממספר מוקשח, ובלי סיכון לנפילה. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
    :root {
        --rule-soft: color-mix(in srgb, var(--color-link) 12%, transparent);
        --rule-link: color-mix(in srgb, var(--color-link) 32%, transparent);
        --tint-link: color-mix(in srgb, var(--color-link) 9%, transparent);
    }
}

/* הטוקנים הישנים ממופים לסולם החדש — כל שימוש קיים באתר נשאר תקף */
:root {
    --card-shadow-base: var(--elev-1);
    --card-shadow-hover: var(--elev-1-hover);
    --tt-card-shadow: var(--elev-1);
    --tt-card-shadow-hover: var(--elev-1-hover);
    --fa-shadow-card: var(--elev-1);
    --fa-shadow-soft: var(--elev-2);
    --fa-shadow-strong: var(--elev-3);
}

/* ---------------------------------------------------------
   41.3 טיפוגרפיה נזילה בעמוד הבית
   דפי התוכן כבר עבדו ב-clamp(), אבל עמוד הבית נשאר על px קבועים
   (52 / 34 / 24 / 20 / 18). כותרת 52px בעברית על מסך 360px נחתכת,
   ועל מסך 1600px נראית קטנה. כאן שני העולמות מתיישרים.
   --------------------------------------------------------- */
.fa-home .fa-hero-title { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); text-wrap: balance; }
.fa-h2,
.fa-h2-tight,
.fa-home .fa-banner-title { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); text-wrap: balance; }
.fa-col-title { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); }
.fa-sidebar-title { font-size: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem); }
.fa-card-title { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); text-wrap: balance; }
.fa-home .fa-hero-text { font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); }
.fa-lead,
.fa-home .fa-lead-muted,
.fa-banner-text { font-size: clamp(1rem, .96rem + .2vw, 1.125rem); }
.fa-home .fa-btn-primary,
.fa-home .fa-btn-outline,
.fa-home .fa-btn-white { font-size: clamp(1.0625rem, 1.02rem + .2vw, 1.125rem); }

/* איזון שורות בכותרות — מונע "מילה בודדת בשורה אחרונה" בעברית */
h1, h2, h3, .entry-title { text-wrap: balance; }
p, .fa-card-text, .fa-attr-desc { text-wrap: pretty; }

/* ---------------------------------------------------------
   41.4 עיגון הרדיוסים החורגים לסולם
   20px ו-14px היו שני יוצאי דופן בודדים מול הסולם 8/12/16/22.
   --------------------------------------------------------- */
.fa-sidebar { border-radius: var(--fa-radius-lg); }
.fa-attr-card { border-radius: var(--fa-radius-sm); box-shadow: var(--elev-1); }
.fa-attr-img { border-radius: calc(var(--fa-radius-sm) - 4px); }

/* ---------------------------------------------------------
   41.5 קישורים בגוף הטקסט — נגזרים מהמשתנה במקום מ-rgba קבוע
   קודם היו שלושה עותקים מוקשחים של rgba(79,100,176,...).
   כל שינוי עתידי של --color-link ישפיע כעת גם על הקו והרקע.
   --------------------------------------------------------- */
h2 { border-bottom-color: var(--rule-soft); }
p a { border-bottom-color: var(--rule-link); }
p a:hover { background-color: var(--tint-link); }/* ---------------------------------------------------------
   41.6 מיקוד מקלדת — השלמת הפערים
   בקובץ היו 16 כללי :focus-visible,
אבל כל רכיבי עמוד הבית
   (.fa-card,
.fa-attr-card,
.fa-btn-primary,
.fa-btn-white,
.fa-link-more) והאקורדיונים לא כוסו. WCAG 2.4.7.
   --------------------------------------------------------- */
.fa-card:focus-visible,
.fa-attr-card:focus-visible,
.fa-home .fa-btn-primary:focus-visible,
.fa-home .fa-btn-white:focus-visible,
.fa-link-more:focus-visible,
.fa-badge:focus-visible,
.fa-badge-sm:focus-visible,
.fa-home a:focus-visible,
.zvi-cat-card-summary:focus-visible,
.zvi-cat-card:focus-visible,
.entry-content p a:focus-visible,
.comparison-table a:focus-visible,
figcaption a:focus-visible
{
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--fa-radius-sm);
}

/* קישור "דלג לתוכן" — נחשף רק בניווט מקלדת */
.fa-skip-link {
    position: absolute;
    inset-inline-start: 12px;
    inset-block-start: -100px;
    z-index: calc(var(--z-drawer) + 1);
    background: var(--color-link-hover);
    color: #fff;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: var(--fa-radius-sm);
    text-decoration: none;
}
.fa-skip-link:focus {
    inset-block-start: 12px;
    color: #fff;
}

/* ---------------------------------------------------------
   41.7 גלילת עוגן + הדגשת יעד
   לא היה שום scroll-margin בקובץ, ויש באתר גם הדר דביק וגם TOC דביק.
   כל קליק ב-TOC — וכל קישור עומק מגוגל או ממנוע AI לכותרת מסוימת —
   נחת עד כה מתחת לסרגל. זו גם נגישות וגם GEO.
   --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.zvi-faq-item,
.zvi-faq-clean details {
    scroll-margin-block-start: var(--anchor-offset);
}
h1:target, h2:target, h3:target, h4:target, h5:target, h6:target,
.zvi-faq-item:target,
.zvi-faq-clean details:target {
    animation: zvi-target-flash 1.6s ease-out 1;
}
@keyframes zvi-target-flash {
    from { background-color: var(--tint-link); }
    to   { background-color: transparent; }
}

/* ---------------------------------------------------------
   41.8 ריחוף רק במקום שיש בו ריחוף
   .fa-card ו-.fa-attr-card הזיזו את עצמן ב-:hover גם במגע,
   ולכן הכרטיס "נתקע" מוזז אחרי נגיעה במובייל.
   בנוסף: translateX(-3px) ב-RTL הזיז את הכרטיס החוצה מכיוון
   הקריאה — כאן זה מתוקן לכיוון הנכון.
   --------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
    .fa-card:hover,
    .fa-attr-card:hover,
    .zvi-cat-card:hover {
        transform: none;
    }
}
@media (hover: hover) and (pointer: fine) {
    .fa-card:hover { box-shadow: var(--elev-1-hover); }
    .fa-attr-card:hover { transform: translateX(3px); }
}

/* יעדי נגיעה — קישורי "קרא עוד" היו קטנים מ-44px במגע */
@media (pointer: coarse) {
    .fa-link-more,
    .fa-link-more.is-sm,
    .fa-link-more.is-md {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* ---------------------------------------------------------
   41.9 העדפת תנועה מופחתת — מפסק ראשי
   בקובץ 60 transitions, 5 animations ו-3 keyframes,
   אבל רק שני כללי prefers-reduced-motion מקומיים. WCAG 2.3.3.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .fa-card:hover,
    .fa-attr-card:hover,
    .zvi-cat-card:hover,
    .zvi-grid-post-card:hover {
        transform: none !important;
    }
}

/* ---------------------------------------------------------
   41.10 מצב ניגודיות כפויה (Windows High Contrast)
   הכרטיסים באתר מוגדרים ע"י צל בלבד. במצב forced-colors הצללים
   נמחקים והכרטיסים נמסים לרקע אחד. גבול דק מחזיר את הגבולות.
   --------------------------------------------------------- */
@media (forced-colors: active) {
    .fa-card,
    .fa-attr-card,
    .fa-sidebar,
    .zvi-cat-card,
    .zvi-booking-card,
    .zvi-hotel-card,
    .zvi-grid-post-card {
        border: 1px solid CanvasText;
    }
    .fa-home .fa-btn-primary,
    .fa-home .fa-btn-outline,
    .fa-home .fa-btn-white {
        border: 1px solid ButtonText;
    }
    :focus-visible {
        outline: 3px solid Highlight;
    }
}

/* ---------------------------------------------------------
   41.11 שכבת הדפסה / חילוץ טקסט — הרווח ל-GEO
   לא היה @media print בקובץ בכלל. שני דברים קורים כאן:
   1. מסלולי טיול ומדריכי מלונות הופכים לניתנים להדפסה באמת.
   2. צינורות רינדור-להדפסה (וגם לא מעט כלי חילוץ) רואים סוף-סוף
      את התוכן שהיה מקופל ב-details או חתוך ב-line-clamp.
   מסיבה זו בכוונה לא הוספתי content-visibility: auto —
   הוא מוציא תוכן מהרינדור ופוגע בדיוק במה שאנחנו רוצים שייקרא.
   --------------------------------------------------------- */
@media print {
    details { display: block; }
    details > *:not(summary) { display: block !important; }
    /* כלל נפרד בכוונה: ::details-content לא מוכר במנועים ותיקים,
       ובסלקטור משותף הוא היה מבטל את כל הכלל */
    details::details-content {
        content-visibility: visible !important;
        block-size: auto !important;
    }
    .zvi-faq-item > div,
    .zvi-faq-clean details > div,
    .zvi-booking-details > *,
    .zvi-cat-card-details > * {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }
    summary::after,
    summary::-webkit-details-marker { display: none !important; }

    .zvi-booking-desc,
    .zvi-cat-card-desc,
    .fa-card-text,
    .fa-attr-desc {
        display: block !important;
        -webkit-line-clamp: none !important;
        overflow: visible !important;
        max-height: none !important;
    }

    #sticky-toc-wrapper,
    .zvi-mobile-sticky-footer,
    .zvi-floating-sidebar,
    .fa-skip-link,
    .zvi-filter-dropdown,
    .zvi-load-more-btn,
    .fa-newsletter,
    .fa-hero-glow {
        display: none !important;
    }

    .fa-card,
    .fa-attr-card,
    .fa-sidebar,
    .zvi-cat-card,
    .zvi-booking-card {
        box-shadow: none !important;
        border: 1px solid #999 !important;
        break-inside: avoid;
    }
    .fa-banner-purple,
    .fa-hero {
        background: none !important;
        border: 1px solid #999 !important;
    }
    .fa-banner-purple h1, .fa-banner-purple h2,
    .fa-banner-purple h3, .fa-banner-purple h4,
    .fa-banner-eyebrow,
    .fa-banner-text {
        color: #000 !important;
    }

    .entry-content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: .75em;
        word-break: break-all;
    }

    h1, h2, h3, h4 { break-after: avoid; }
    img, figure, table { break-inside: avoid; }
}

/* ---------------------------------------------------------
   41.12 גופן אחיד לכל הכפתורים — Heebo לכל קריאה-לפעולה
   רוב הכפתורים באתר (zvi-ticket-btn, fr-att-btn, כפתורי טבלה ועוד) כבר
   ב-Heebo דרך var(--font-heading). אבל שמונה קבוצת נשארה מאחורי על אסיסטנט:
   שלושת הכפתורים בעמוד הבית, כפתורי ה-CTA בהדר, כפתורי עוגייה ניידת/מודאל,
   כפתורי עוגיות ואישור, וכפתורי נגישות.
   בנוסף: לכפתור ה-WordPress הרגיל (.wp-block-button__link.wp-element-button)
   היו שני כללי font-family סותרים בקובץ — אחד הגדיר Heebo (במערכת
   "כפתורים ראשיים") ואחד Assistant (מאוחר יותר בקובץ, ובמצב תיקו֠ שווה
   עדיפות, האחרון בסדר ניצח — זה היה הבאג בפועל). סוף לניצחון — כלל אחד.
   מונע בכוונה: שדות טקסט, textarea ו-select אמיתיים (חיפוש, טופס DSR,
   שדות תגובה) נשארו ב-Assistant בכוונה — קירואות עברית בהקלדה נשמעת טוב יותר
   בפונט הגוף, לא בפונט הכותרת.
   --------------------------------------------------------- */
.fa-home .fa-btn-primary,
.fa-home .fa-btn-outline,
.fa-home .fa-btn-white,
#zvi-header-root .zvi-action-btn,
.sticky-cta-btn,
.sticky-modal-btn,
.p13-primary-btn,
.p13-secondary-btn,
.fa-a11y-action-btn,
.fa-a11y-reset-btn,
.wp-block-button__link.wp-element-button {
    font-family: var(--font-heading);
}
/* ---------------------------------------------------------
   41.13 כותרות "יתומות" — Heebo גם כשהמערכת אינה <h1>-<h6>
   הכלל הגלובלי "h1, h2, h3, h4, h5, h6, .entry-title { font-family: var(--font-heading) }"
   מכסה רק תגיות כותרת אמיתיות. שבע המחלקות הבאות משמשות על <div>/<span>/<strong>
   ומעולם לא קיבלו font-family בכלל,
ולכן נפלו ל-Assistant של ה-body במקום Heebo:
   .fa-attr-name (כרטיסי אטרקציות בסיידבר,
נתפס בצילום מסך),
.fa-contact-label,
.fa-testi-name,
.zvi-booking-title,
.hotel-title,
.top-pick-title.
   --------------------------------------------------------- */
.fa-attr-name,
.fa-contact-label,
.fa-testi-name,
.zvi-booking-title,
.hotel-title,
.top-pick-title
{
    font-family: var(--font-heading);
}
/* =========================================
   42. ZVI TAB BAR - SCROLL AFFORDANCE
   נוסף בכוונה בסוף הקובץ: אפס מחיקות. פתרון לשאלה של האם
   יש עוד טאבים מעבר לגבול המסך של שורת הטאבים — דהייה עדינה בקצוות
   כשהשורה ניתנת לגלילה אופקית (מחלקה על ידי JS באמצעות המחלקה
   is-scrollable), כדי לרמוז שיש עוד תוכן גם כשאין פס גלילה גלוי (נמנע
   בכוונה ב-scrollbar-width: none למעלה). עובד בשני הכיוונים כי זהו עימעום
   שקופ סימטרי על שני הקצות.
   ========================================= */
.zvi-tab-buttons.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 28px), transparent);
}
/* ========================================= 
42. ZVI 2-COLUMN GRID — רשת שתי עמודות קבועה לכרטיסים/חבילות (לא אוטו-פיט, נשברת רק מתחת ל-600px)
========================================= */
.zvi-2col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    align-items: stretch;
}
@media (max-width: 600px) {
    .zvi-2col-grid { grid-template-columns: 1fr; }
}

/* Fix: WP Rocket lazyload replaces the YouTube iframe with a div.rll-youtube-player,
   which was never sized by .zvi-booking-media rules, so the media area collapsed. */
.zvi-booking-media .rll-youtube-player {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.zvi-booking-media .rll-youtube-player img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   LEGACY HOTEL PAGE BLOCKS (moved out of inline styles)
   ========================================= */
.family-top-3-box {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    margin: 30px 0;
    direction: rtl;
}
.family-top-3-box h3 {
    text-align: center;
    color: #CF3834 !important;
    margin-bottom: 20px !important;
    font-family: 'Karantina', sans-serif;
    font-size: 2em;
}
.hotel-row-title {
    font-weight: bold;
    color: #4F64B0;
    display: block;
    font-size: 1.1em;
}
.hotel-row-desc {
    font-size: 0.95em;
    color: #555;
}
.zvi-card-tip {
    background: #fff;
    border-right: 5px solid #4F64B0;
    padding: 15px;
    margin: 10px 0 30px 0;
    font-size: 0.95em;
    text-align: right;
}
.family-top-3-box .hotel-row .zvi-card-btn {
    width: auto;
    padding: 5px 20px;
}

/* ===== Element 133317: CSS – Header and Single Post ===== */
/* =========================================
   1. ZVI HEADER ROOT & BASE SETTINGS
   ========================================= */
/* הערה לתחזוקה: --z-header-elevated (99995), #zvi-toc-dropdown (99998 hardcoded),
   #zvi-search-results (1000) ו-#zvi-progress-bar (1011) הם ארבעה ערכי z-index
   שלא נכנסים לסקאלה המוצהרת בקובץ הראשי (800/801/802/9999998/9999999).
   כרגע אין התנגשות בפועל — רק תיעוד לפעם הבאה שנוגעים כאן, כדי לאחד הכל
   לאותה מערכת משתנים ולא להשאיר את זה למזל.
   ========================================= */
:root {
    --z-header-elevated: 99995;
}

#zvi-header-root {
    position: relative;
    width: 100%;
    z-index: var(--z-header-elevated);
    background-color: #ffffff;
}

#zvi-header-root * {
    box-sizing: border-box;
    font-family: var(--font-heading);
}

/* =========================================
   2. TOP BAR (סרגל קישורים עליון)
   ========================================= */
.zvi-top-bar {
    background-color: var(--color-link-hover, #15399B);
    height: 38px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.zvi-top-links-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.zvi-top-links-container::-webkit-scrollbar { 
    display: none; 
}

.zvi-top-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.zvi-top-link:hover,
.zvi-top-link:focus-visible { 
    color: #ffffff; 
}

.zvi-top-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
    border-radius: 2px;
}

/* =========================================
   3. MAIN WHITE HEADER (אזור לוגו וניווט ראשי)
   ========================================= */
.zvi-white-header {
    background-color: #ffffff;
    height: 80px;
    border-bottom: 1px solid var(--sb-border, #E5E5E5);
    display: flex;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    position: relative;
    z-index: var(--z-header, 800);
}

.zvi-inner-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

#zvi-logo-img {
    max-height: 50px;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

#zvi-header-root .zvi-sp-link-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    margin: 0;
    padding: 0;
    text-decoration: none;
    flex-shrink: 0;
    min-width: 0;
}

#zvi-header-root .zvi-sp-link-wrapper:hover { 
    opacity: 0.88; 
}

.zvi-sp-link-wrapper .zvi-sp-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

.zvi-sp-link-wrapper .zvi-sp-text span {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.zvi-sp-link-wrapper .zvi-sp-text span:first-child { 
    font-weight: 600; 
    color: var(--color-text-main, #1A1800); 
}

.zvi-sp-link-wrapper .zvi-sp-text span.decision-header { 
    font-weight: 700; 
    color: var(--color-link, #4F64B0); 
}

#zvi-header-root .zvi-right-group {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
}

/* =========================================
   4. ACTION BUTTONS (כפתורי קריאה לפעולה)
   ========================================= */
#zvi-header-root .zvi-action-btn {
    padding: 0 22px;
    height: 44px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
    white-space: nowrap;
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease, color 0.25s ease;
}

#zvi-header-root .zvi-action-btn svg {
    fill: currentColor;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

#zvi-header-root .zvi-action-btn.zvi-bg-blue {
    background-color: transparent;
    color: var(--color-link, #4F64B0);
    border-color: var(--color-link, #4F64B0);
}

#zvi-header-root .zvi-action-btn.zvi-bg-blue:hover {
    background-color: rgba(79, 100, 176, 0.06);
    transform: translateY(-2px);
}

#zvi-header-root .zvi-action-btn.zvi-bg-red {
    background-color: var(--accent-red, #CF3834);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(207, 56, 52, 0.2);
}

#zvi-header-root .zvi-action-btn.zvi-bg-red:hover {
    background-color: #b02a27;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(207, 56, 52, 0.3);
}

#zvi-header-root .zvi-action-btn:focus-visible {
    outline: 2px solid var(--color-link, #4F64B0);
    outline-offset: 3px;
}

/* =========================================
   5. ICONS (המבורגר, נגישות, שפה)
   ========================================= */
#zvi-header-root .zvi-search-btn,
#zvi-header-root #zvi-main-hamburger,
#zvi-header-root #zvi-sticky-hamburger,
#zvi-header-root .zvi-wa-btn-header {
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    color: var(--color-link, #4F64B0);
    transition: background-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#zvi-header-root .zvi-search-btn:hover,
#zvi-header-root #zvi-main-hamburger:hover,
#zvi-header-root #zvi-sticky-hamburger:hover { 
    background-color: var(--bg-quote, #f5f5f5); 
}

#zvi-header-root .zvi-wa-btn-header { 
    color: var(--color-whatsapp, #25D366); 
}

#zvi-header-root .zvi-wa-btn-header:hover { 
    background-color: var(--bg-quote, #f5f5f5); 
    transform: scale(1.05); 
}

/* מצב מקלדת (נגישות) — אלמנטים על רקע לבן/בהיר: מסגרת כחולה */
#zvi-header-root .zvi-search-btn:focus-visible,
#zvi-header-root #zvi-main-hamburger:focus-visible,
#zvi-header-root #zvi-sticky-hamburger:focus-visible,
#zvi-header-root .zvi-wa-btn-header:focus-visible,
#zvi-toc-dropdown-trigger:focus-visible,
.toc-link:focus-visible,
.zvi-in-article-link:focus-visible,
.zvi-unified-item:focus-visible,
.zvi-popular-grid-item:focus-visible,
#zvi-search-btn:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
}

/* מצב מקלדת — אלמנטים שיושבים על רקע כחול מלא (כפתור עצמו כחול): מסגרת לבנה,
   אחרת מסגרת כחולה על רקע כחול פשוט לא נראית */
.zvi-nav-icon-btn:focus-visible,
.zvi-h3-toggle:focus-visible,
.zvi-in-article-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

#zvi-header-root #zvi-main-hamburger svg { width: 22px; height: 17px; }
#zvi-header-root #zvi-sticky-hamburger svg { width: 20px; height: 15px; }

#zvi-header-root .zvi-gtranslate-area {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    flex-shrink: 0;
}

#zvi-header-root .zvi-gtranslate-area .gtranslate_wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 5px;
}

.zvi-gtranslate-area img { width: 20px; height: auto; border-radius: 2px; }

#zvi-header-root .zvi-lang-flags {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

#zvi-header-root .zvi-lang-flags img,
#zvi-header-root .zvi-lang-flags svg { 
    width: 20px; height: 14px; border-radius: 2px; flex-shrink: 0; 
}

/* =========================================
   6. RESPONSIVE — HEADER
   ========================================= */
@media (max-width: 1024px) {
    .desktop-only { display: none !important; }
}

@media (max-width: 768px) {
    .zvi-white-header { height: 65px; }
    .zvi-inner-container { padding: 0 16px; }
    #zvi-header-root .zvi-right-group { gap: 10px; }
}

@media (max-width: 480px) {
    .zvi-inner-container { padding: 0 12px; }
    #zvi-logo-img { max-height: 34px !important; }
    .zvi-sp-link-wrapper .zvi-sp-text span { font-size: 0.75rem !important; }
    #zvi-header-root .zvi-right-group { gap: 6px; }
}

/* =========================================
   7. POST HERO & HEADER WRAPPER
   ========================================= */
.zvi-header-wrapper-root {
    --z-border: rgba(255,255,255,0.3);
}

.zvi-header-wrapper {
    background: linear-gradient(135deg, var(--color-link) 0%, var(--color-link-hover) 100%);
    color: #ffffff;
    padding: 44px 40px;
    margin-bottom: 30px;
    border-radius: 20px;
    box-shadow: 0 20px 45px -14px rgba(21,57,155,0.35), 0 2px 6px rgba(21,57,155,0.12);
    overflow: hidden;
    text-align: start;
    position: relative;
}

.zvi-header-wrapper::before {
    content: '';
    position: absolute;
    inset-inline-end: -90px;
    top: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

.zvi-header-wrapper, .zvi-header-wrapper a {
    color: #ffffff;
}

.zvi-inner-content { max-width: 1200px; margin: 0 auto; position: relative; }

.zvi-flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: nowrap;
}

.zvi-content-side { flex: 1 1 auto; min-width: 0; }
.zvi-image-side { flex: 0 0 380px; max-width: 42%; flex-shrink: 0; }

.zvi-header-wrapper.zvi-no-image .zvi-content-side { max-width: 760px; }

.zvi-hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 18px 36px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.12) inset;
    border: none;
    display: block;
    transition: transform 0.4s ease;
}

body .zvi-breadcrumbs, body .zvi-breadcrumbs p, body .rank-math-breadcrumb, body .rank-math-breadcrumb span {
    font-size: 14px;
    margin-bottom: 16px;
    display: inline-block;
    color: #ffffff;
}

body .zvi-breadcrumbs a, body .zvi-breadcrumbs p a, body .rank-math-breadcrumb a {
    text-decoration: none; border: none; background: transparent; font-weight: 500;
    color: #ffffff;
    transition: color 0.2s ease;
}

body .zvi-breadcrumbs a:hover, body .zvi-breadcrumbs p a:hover, body .rank-math-breadcrumb a:hover,
body .zvi-breadcrumbs a:focus-visible, body .rank-math-breadcrumb a:focus-visible {
    text-decoration: underline;
    color: #cfcfcf;
}

h1.zvi-dynamic-h1 {
    font-family: var(--font-heading);
    font-size: clamp(30px, 4.2vw, 48px);
    margin: 0 0 16px 0;
    line-height: 1.18;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    text-shadow: none;
}

.zvi-sub-title { font-size: clamp(24px, 4vw, 32px); line-height: 1.25; margin: 0 0 15px 0; font-weight: 700; }

.zvi-cat-description, .zvi-cat-description p {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
    font-weight: 400;
    margin-bottom: 0;
    color: rgba(255,255,255,0.92);
    max-width: 620px;
}

.zvi-meta-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--z-border);
    margin-top: 26px;
    color: rgba(255,255,255,0.85);
}

.zvi-meta-strip span, .zvi-meta-strip div, .zvi-meta-strip a { text-decoration: none; }
.zvi-meta-item { display: flex; align-items: center; gap: 6px; }
.zvi-divider { opacity: 0.4; }
.zvi-meta-link {
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.zvi-meta-link:hover { border-bottom-color: rgba(255,255,255,0.85); }

a.zvi-tag {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.35);
    color: #ffffff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
    backdrop-filter: blur(4px);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

a.zvi-tag:hover { background: #ffffff; color: var(--color-link-hover); border-color: #ffffff; transform: translateY(-1px); }

@media (max-width: 1100px) {
    .zvi-flex-container { gap: 26px; }
    .zvi-image-side { flex-basis: 300px; max-width: 38%; }
}

@media (max-width: 900px) {
    .zvi-header-wrapper { padding: 30px 22px; border-radius: 16px; }
    .zvi-flex-container { flex-direction: column; flex-wrap: wrap; gap: 22px; }
    .zvi-image-side { width: 100%; max-width: 100%; flex: none; }
    .zvi-hero-img { aspect-ratio: 16/9; }
}

/* =========================================
   8. STICKY TOC SYSTEM
   ========================================= */
#sticky-toc-wrapper { 
    display: none; 
    width: 100%; 
    height: 60px; 
    border-bottom: 1px solid var(--sb-border); 
    will-change: transform; 
    overflow: visible; 
}

#sticky-toc-wrapper.is-locked-toc {
    position: fixed; 
    top: 0; 
    inset-inline-start: 0; 
    inset-inline-end: 0; 
    display: block;
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px); 
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 28px rgba(21,57,155,0.08);
    z-index: var(--z-sticky);
    animation: zviSlideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#sticky-toc-wrapper.is-locked-toc.smart-hidden { 
    animation: zviSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

@keyframes zviSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes zviSlideUp { from { transform: translateY(0); } to { transform: translateY(-100%); } }

@media (prefers-reduced-motion: reduce) {
    #sticky-toc-wrapper.is-locked-toc,
    #sticky-toc-wrapper.is-locked-toc.smart-hidden {
        animation: none;
    }
}

.admin-bar #sticky-toc-wrapper.is-locked-toc { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #sticky-toc-wrapper.is-locked-toc { top: 46px; } }

#zvi-progress-bar { 
    position: absolute; 
    bottom: -1px; 
    inset-inline-start: 0; 
    height: 3px; 
    background-color: var(--accent-red, #CF3834); 
    width: var(--scroll-progress, 0%); 
    transition: width 0.1s linear;
    z-index: 1011; 
    border-radius: 0 3px 3px 0; 
}

#sticky-toc-wrapper .toc-container {
    position: relative;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
    max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 20px; box-sizing: border-box;
}

#zvi-sticky-fixed-group { display: contents; }

#zvi-sticky-hamburger { order: 1; margin-inline-end: 5px; }

#sticky-toc-wrapper .fa-a11y-trigger-btn {
    order: 2; background-color: transparent !important; width: 40px; height: 40px; border-radius: 50%;
    transition: background-color 0.2s ease;
}
#sticky-toc-wrapper .fa-a11y-trigger-btn:hover { background-color: var(--bg-quote) !important; }
#sticky-toc-wrapper .fa-a11y-trigger-btn svg,
#sticky-toc-wrapper .fa-a11y-trigger-btn img,
#sticky-toc-wrapper .fa-a11y-trigger-btn i {
    color: var(--color-link) !important;
    fill: var(--color-link) !important;
}

#zvi-toc-dropdown-trigger {
    display: flex; align-items: center; justify-content: space-between; order: 3; flex-grow: 1;
    gap: 8px; height: 44px; padding: 0 16px; margin: 0 5px; /* היה 42px */
    background-color: #F7F8FB;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-main, #1A1800);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--sb-border, #E5E5E5);
}
#zvi-toc-dropdown-trigger:hover { background-color: #eef0f7; border-color: var(--color-link); }

#zvi-current-heading-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 1rem; font-weight: 600; color: var(--color-text-main); display: block; width: 100%; min-width: 0; text-align: start;
}

.zvi-dropdown-arrow { width: 18px; height: 18px; fill: currentColor; color: var(--color-link); transition: transform 0.3s; flex-shrink: 0; }
#zvi-toc-dropdown-trigger.open .zvi-dropdown-arrow,
#zvi-toc-dropdown-trigger[aria-expanded="true"] .zvi-dropdown-arrow { transform: rotate(180deg); }

.toc-link.home-btn { order: 4; margin-inline-start: auto; }

.toc-link.home-btn, .toc-link.search-btn, .toc-link.wa-btn, #zvi-sticky-hamburger, #zvi-main-hamburger.in-sticky-toc {
    height: 44px; width: 44px; /* היה 40px — נכשל ביעד מגע 44px */
    border: none; background: transparent; box-shadow: none; border-radius: 50%;
    color: var(--color-link); cursor: pointer; text-decoration: none; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease;
}
.toc-link.home-btn:hover, #zvi-sticky-hamburger:hover { background-color: var(--bg-quote); box-shadow: inset 0 0 0 1px var(--sb-border); }

.toc-link.wa-btn { color: var(--color-whatsapp); display: none; }
#sticky-toc-wrapper.is-locked-toc .toc-link.wa-btn { display: flex; }

.toc-link.home-btn svg, .toc-link.search-btn svg, .toc-link.wa-btn svg, #zvi-sticky-hamburger svg, #zvi-main-hamburger.in-sticky-toc svg,
.toc-link.home-btn img, .toc-link.search-btn img, .toc-link.wa-btn img, #zvi-sticky-hamburger img, #zvi-main-hamburger.in-sticky-toc img {
    display: block; width: 22px; height: 22px; margin: 0; padding: 0; fill: currentColor; position: static; transform: none; vertical-align: middle;
}
#sticky-toc-wrapper .toc-link.home-btn svg, #sticky-toc-wrapper .toc-link.home-btn img { width: 26px; height: 26px; }
#sticky-toc-wrapper #zvi-sticky-hamburger svg { width: 24px; height: 24px; }
.toc-link.home-btn::after { display: none; }

@media (max-width: 768px) {
    #sticky-toc-wrapper .toc-container { gap: 6px; padding: 0 10px; }
    #zvi-toc-dropdown-trigger { padding: 0 12px; height: 44px; margin: 0; } /* היה 36px — בדיוק במובייל, איפה שהכי קריטי */
    #zvi-current-heading-text { font-size: 0.9rem; }
    #zvi-sticky-hamburger { margin-inline-end: 0; }
}

#zvi-toc-dropdown {
    position: absolute; top: 100%; inset-inline-start: 0; inset-inline-end: 0;
    background-color: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 16px 36px rgba(21,57,155,0.1);
    border-bottom-left-radius: 14px; border-bottom-right-radius: 14px;
    border-top: 1px solid var(--sb-border);
    display: none; flex-direction: column; max-height: 70vh; overflow-y: auto; z-index: 99998;
}
#zvi-toc-dropdown.show, #zvi-toc-dropdown.is-open { display: flex; animation: faqFadeIn 0.3s ease; }

.zvi-dropdown-title {
    font-family: var(--font-heading);
    font-size: 1.05rem; font-weight: 700; color: var(--color-link);
    padding: 16px 20px 12px; margin: 0; border-bottom: 1px solid #f0f0f0; background: #fafbfd;
}

#zvi-toc-dropdown ul, #zvi-toc-dropdown li { list-style: none !important; margin: 0; padding: 0; }
#zvi-toc-dropdown ul.zvi-h3-wrapper { padding: 5px 0; }

.toc-link:not(.home-btn):not(.search-btn):not(.wa-btn) {
    text-decoration: none;
    color: var(--color-text-main);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: color 0.2s ease, background-color 0.2s ease, padding 0.2s ease;
    cursor: pointer;
    padding: 14px 15px;
    line-height: 1.4;
    box-sizing: border-box;
}
.toc-link:not(.home-btn):not(.search-btn):not(.wa-btn):hover {
    color: var(--color-link); background-color: #f7f8fc; font-weight: 700; padding-inline-start: 22px;
}
.toc-link.active-spy { color: var(--color-link); font-weight: 700; background-color: #eef1fa; padding-inline-start: 22px; }

.zvi-toc-h2-row { display: flex; align-items: stretch; width: 100%; border-bottom: 1px solid #f0f0f0; }
.zvi-toc-h2-row .toc-link { flex-grow: 1; border-radius: 0; }

.zvi-h3-toggle {
    width: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    background-color: var(--color-link);
    border: none; border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0; appearance: none; padding: 0; margin: 0; outline: none; box-shadow: none;
    border-radius: 0;
    transition: background-color 0.25s ease;
}
.zvi-h3-toggle svg { display: none; }
.zvi-h3-toggle:hover { background-color: var(--color-link-hover); }
.zvi-h3-toggle::after {
    content: ''; display: block; width: 8px; height: 8px;
    border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
    transform: rotate(45deg); transition: transform 0.3s ease; margin-bottom: 4px;
}
.zvi-h3-toggle.open::after, .zvi-h3-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -4px; }

.zvi-h3-wrapper { background-color: rgba(79,100,176,0.045); display: none; border-top: 1px solid #f0f0f0; }
.zvi-h3-wrapper.is-open { display: block; animation: faqFadeIn 0.3s ease; }

.zvi-h3-wrapper .toc-link:not(.home-btn):not(.search-btn):not(.wa-btn) {
    position: relative;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--color-gray-mid);
    padding: 10px 45px 10px 15px;
    margin: 0 10px;
    border-bottom: 1px dashed #e6e6e6;
    background-color: transparent;
    border-radius: 8px;
    display: block;
}
.zvi-h3-wrapper .toc-link:not(.home-btn):not(.search-btn):not(.wa-btn):last-of-type { border-bottom: none; }
.zvi-h3-wrapper .toc-link:not(.home-btn):not(.search-btn):not(.wa-btn):hover,
.zvi-h3-wrapper .toc-link.active-spy {
    color: var(--color-link-hover);
    background-color: rgba(79, 100, 176, 0.08);
    padding-inline-start: 50px;
    font-weight: 700;
}

.zvi-h3-wrapper .toc-link:not(.home-btn):not(.search-btn):not(.wa-btn)::before {
    content: "";
    position: absolute;
    inset-inline-start: 20px;
    top: 45%;
    width: 10px; height: 14px;
    border-block-end: 2px solid var(--color-gray-faint);
    border-inline-start: 2px solid var(--color-gray-faint);
    border-end-start-radius: 4px;
    transform: translateY(-80%);
    transition: border-color 0.2s ease;
}
.zvi-h3-wrapper .toc-link:not(.home-btn):not(.search-btn):not(.wa-btn):hover::before,
.zvi-h3-wrapper .toc-link.active-spy::before { border-color: var(--color-link); }

#zvi-toc-placeholder.is-active { display: block; height: var(--toc-placeholder-height, 56px); }

/* =========================================
   9. IN-ARTICLE TOC (ACCORDION UI)
   ========================================= */
.toc-container-box, .zvi-toc-container {
    background-color: var(--card-bg-color, #ffffff);
    border: 1px solid var(--sb-border, #E5E5E5);
    border-radius: var(--card-border-radius, 12px);
    padding: 8px;
    margin: 40px auto;
    max-width: 800px;
    box-shadow: var(--card-shadow-base, 0 4px 15px rgba(0,0,0,0.05));
    text-align: start;
}

.toc-container-box .toc-title, .zvi-toc-container .zvi-toc-title,
.toc-title, .zvi-toc-title {
    font-family: var(--font-heading);
    color: var(--color-link);
    font-size: 1.35rem;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 6px;
    padding: 20px 22px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.toc-container-box .toc-grid, .zvi-toc-container .zvi-toc-grid {
    display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0;
}

.toc-container-box .zvi-toc-li-container, .zvi-toc-container .zvi-toc-li-container {
    width: 100%; border-top: 1px solid #f0f0f0; margin: 0;
}
.toc-container-box .zvi-toc-grid > .zvi-toc-li-container:first-child,
.zvi-toc-container .zvi-toc-grid > .zvi-toc-li-container:first-child { border-top: none; }

.toc-container-box .zvi-toc-h2-row, .zvi-toc-container .zvi-toc-h2-row { 
    display: flex; align-items: stretch; width: 100%; justify-content: space-between; gap: 6px;
}

.toc-container-box .zvi-in-article-link,
.zvi-toc-container .zvi-in-article-link {
    display: flex; align-items: center; justify-content: flex-start; flex-grow: 1;
    box-sizing: border-box; padding: 15px 20px;
    background-color: transparent;
    color: var(--color-text-main);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: color 0.2s ease, background-color 0.2s ease, padding 0.2s ease;
}
.toc-container-box .zvi-in-article-link:hover,
.zvi-toc-container .zvi-in-article-link:hover {
    background-color: #f7f8fc;
    color: var(--color-link);
    padding-inline-start: 22px;
    font-weight: 700;
}

/* content-filter TOC toggle */
.toc-container-box .zvi-in-article-toggle, .zvi-toc-container .zvi-in-article-toggle {
    width: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    background-color: var(--color-link);
    border: none; border-inline-start: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px; margin: 6px; flex-shrink: 0;
    appearance: none; padding: 0; outline: none; box-shadow: none;
    transition: background-color 0.25s ease;
}
.toc-container-box .zvi-in-article-toggle:hover, .zvi-toc-container .zvi-in-article-toggle:hover { background-color: var(--color-link-hover); }
.toc-container-box .zvi-in-article-toggle::after, .zvi-toc-container .zvi-in-article-toggle::after {
    content: ''; display: block; width: 8px; height: 8px;
    border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
    transform: rotate(45deg); transition: transform 0.3s ease; margin-bottom: 4px;
}
.toc-container-box .zvi-in-article-toggle.open::after, .zvi-toc-container .zvi-in-article-toggle.open::after,
.toc-container-box .zvi-in-article-toggle[aria-expanded="true"]::after, .zvi-toc-container .zvi-in-article-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg); margin-bottom: -4px;
}

.toc-container-box .zvi-in-article-h3-wrapper, .zvi-toc-container .zvi-in-article-h3-wrapper {
    background-color: rgba(79,100,176,0.045);
    display: none;
    padding: 6px 0 10px;
    border-top: none;
    list-style: none;
    margin: 0;
}
.toc-container-box .zvi-in-article-h3-wrapper.is-open, .zvi-toc-container .zvi-in-article-h3-wrapper.is-open,
.toc-container-box .zvi-in-article-toggle[aria-expanded="true"] ~ .zvi-in-article-h3-wrapper,
.zvi-toc-container .zvi-in-article-toggle[aria-expanded="true"] ~ .zvi-in-article-h3-wrapper { 
    display: flex; flex-direction: column; animation: faqFadeIn 0.3s ease; 
}
.toc-container-box .zvi-in-article-h3-wrapper li, .zvi-toc-container .zvi-in-article-h3-wrapper li { border-bottom: 1px dashed #e6e6e6; margin: 0 14px; list-style: none; }
.toc-container-box .zvi-in-article-h3-wrapper li:last-child, .zvi-toc-container .zvi-in-article-h3-wrapper li:last-child { border-bottom: none; }
.toc-container-box .zvi-in-article-h3-wrapper .zvi-in-article-h3-link, .zvi-toc-container .zvi-in-article-h3-wrapper .zvi-in-article-h3-link {
    position: relative;
    font-family: var(--font-heading);rn    font-size: 1.02rem; font-weight: 500; color: var(--color-gray-mid);
    padding: 10px 44px 10px 16px; border-radius: 8px; display: block; text-decoration: none;
}
.toc-container-box .zvi-in-article-h3-wrapper .zvi-in-article-h3-link:hover, .zvi-toc-container .zvi-in-article-h3-wrapper .zvi-in-article-h3-link:hover {
    color: var(--color-link-hover); background-color: rgba(79, 100, 176, 0.08); padding-inline-start: 22px;
}

.toc-container-box .zvi-h3-toggle, .zvi-toc-container .zvi-h3-toggle {
    width: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    background-color: var(--color-link);
    border: none; border-inline-start: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px; margin: 6px; flex-shrink: 0;
    transition: background-color 0.25s ease;
}
.toc-container-box .zvi-h3-toggle:hover, .zvi-toc-container .zvi-h3-toggle:hover { background-color: var(--color-link-hover); }
.toc-container-box .zvi-h3-toggle::after, .zvi-toc-container .zvi-h3-toggle::after {
    content: ''; display: block; width: 8px; height: 8px;
    border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff;
    transform: rotate(45deg); transition: transform 0.3s ease; margin-bottom: 4px;
}
.toc-container-box .zvi-h3-toggle.open::after, .zvi-toc-container .zvi-h3-toggle.open::after { transform: rotate(-135deg); margin-bottom: -4px; }

.toc-container-box .zvi-h3-wrapper, .zvi-toc-container .zvi-h3-wrapper {
    background-color: rgba(79,100,176,0.045);
    display: none;
    padding: 6px 0 10px;
    border-top: none;
}
.toc-container-box .zvi-h3-wrapper.is-open, .zvi-toc-container .zvi-h3-wrapper.is-open { display: flex; animation: faqFadeIn 0.3s ease; }
.toc-container-box .zvi-h3-wrapper li, .zvi-toc-container .zvi-h3-wrapper li { border-bottom: 1px dashed #e6e6e6; margin: 0 14px; list-style: none; }
.toc-container-box .zvi-h3-wrapper li:last-child, .zvi-toc-container .zvi-h3-wrapper li:last-child { border-bottom: none; }
.toc-container-box .zvi-h3-wrapper .toc-h3-link, .zvi-toc-container .zvi-h3-wrapper .toc-h3-link,
.toc-container-box .zvi-h3-wrapper .zvi-in-article-h3-link, .zvi-toc-container .zvi-h3-wrapper .zvi-in-article-h3-link {
    position: relative;
    font-family: var(--font-heading);rn    font-size: 1.02rem; font-weight: 500; color: var(--color-gray-mid);
    padding: 10px 44px 10px 16px; border-radius: 8px; display: block; text-decoration: none;
}
.toc-container-box .zvi-h3-wrapper .toc-h3-link:hover, .zvi-toc-container .zvi-h3-wrapper .toc-h3-link:hover,
.toc-container-box .zvi-h3-wrapper .zvi-in-article-h3-link:hover, .zvi-toc-container .zvi-h3-wrapper .zvi-in-article-h3-link:hover {
    color: var(--color-link-hover); background-color: rgba(79, 100, 176, 0.08); padding-inline-start: 22px;
}

@media (max-width: 768px) {
    .toc-container-box, .zvi-toc-container { padding: 6px; }
}

/* =========================================
   10. DRAWER OVERLAY + PANEL
   ========================================= */
#zvi-drawer-overlay {
    position: fixed; inset: 0; background: rgba(20,20,30,0.45);
    z-index: var(--z-drawer-overlay, 9999998);
    display: none;
}
#zvi-drawer-overlay.is-open { display: block; }

#zvi-drawer-wrapper {
    position: fixed; top: 0; bottom: 0; right: 0;
    width: min(400px, 92vw);
    background: #ffffff;
    z-index: var(--z-drawer, 9999999);
    box-shadow: -8px 0 30px rgba(0,0,0,0.15);
    transform: translateX(105%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
#zvi-drawer-wrapper.is-open { transform: translateX(0); }

.zvi-drawer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: linear-gradient(135deg, var(--color-link-hover, #15399B), var(--color-link, #4F64B0));
    flex-shrink: 0;
}

.zvi-drawer-header-controls { display: flex; align-items: center; gap: 6px; }

.zvi-nav-icon-btn {
    width: 44px; height: 44px; /* היה 36px — נכשל ביעד מגע 44px */
    background: rgba(255,255,255,0.15);
    border: none; cursor: pointer;
    color: #ffffff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: background-color 0.2s ease;
    position: relative;
}
.zvi-nav-icon-btn:hover { background: rgba(255,255,255,0.28); }
#zvi-drawer-wa-icon svg { width: 19px; height: 19px; }
#zvi-drawer-wa-icon,
#zvi-drawer-wa-icon:hover,
#zvi-drawer-wa-icon:visited { color: #ffffff !important; }
#zvi-drawer-wa-icon svg { fill: currentColor !important; }

@media (max-width: 480px) {
    #zvi-drawer-wrapper { width: 100vw; }
}

.zvi-nav-icon-btn .zvi-icon-close,
.zvi-nav-icon-btn .zvi-icon-back { display: flex; align-items: center; justify-content: center; }
.zvi-nav-icon-btn .zvi-icon-close svg,
.zvi-nav-icon-btn .zvi-icon-back svg { width: 20px; height: 20px; fill: currentColor; }

.zvi-search-wrapper.zvi-header-search-wrapper { flex: 1; min-width: 0; position: relative; }
#zvi-search-input {
    width: 100%; box-sizing: border-box; height: 40px;
    border: none; border-radius: 20px;
    padding: 0 48px 0 14px; /* היה 40px — הוגדל כדי להתאים לכפתור 44px */
    font-size: 0.9rem; color: var(--color-text-main, #1A1800);
    background: #ffffff;
}
#zvi-search-input:focus { outline: 2px solid #ffffff; outline-offset: 2px; }
#zvi-search-btn {
    position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; /* היה ללא מידה מוגדרת — בפועל רק ה-SVG (~16px) היה בר-לחיצה */
    background: transparent; border: none; padding: 0; cursor: pointer;
    color: var(--color-link, #4F64B0); display: flex; align-items: center; justify-content: center;
}
#zvi-search-btn svg { width: 16px; height: 16px; }

.zvi-drawer-level-title {
    padding: 16px 20px 8px;
    font-weight: 700;
    color: var(--accent-red, #CF3834);
    font-size: 1.1rem;
    border-bottom: 2px solid rgba(79,100,176,0.1);
    margin: 0 12px;
}

#zvi-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #fafbfd;
}

.zvi-level { display: none; }
.zvi-level.active { display: block; }

.zvi-popular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 4px 4px 14px;
}
.zvi-popular-grid-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: start;
    background: #ffffff;
    border: 1px solid #eef0f7;
    border-radius: 12px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--color-text-main, #1A1800);
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(21,57,155,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.zvi-popular-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(21,57,155,0.14);
    border-color: var(--color-link, #4F64B0);
    color: var(--color-link, #4F64B0);
}
.zvi-popular-grid-icon {
    width: 30px; height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(79,100,176,0.15);
}
.zvi-popular-grid-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zvi-drawer-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 8px 10px;
    margin-top: 4px;
    font-weight: 700;
    color: var(--color-text-main, #1A1800);
    font-size: 0.95rem;
}
.zvi-drawer-heading::before {
    content: "";
    width: 4px; height: 16px; border-radius: 2px;
    background: var(--accent-red, #CF3834);
    flex-shrink: 0;
}
.zvi-drawer-heading.has-border-top { border-top: none; }

#zvi-drawer-body ul[aria-label]:not(.zvi-popular-grid) {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}

.zvi-unified-item, .submenu-toggle.zvi-unified-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #eef0f7;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--color-text-main, #1A1800);
    text-align: start;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(21,57,155,0.04);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.zvi-unified-item:hover {
    border-color: var(--color-link, #4F64B0);
    color: var(--color-link, #4F64B0);
    box-shadow: 0 4px 12px rgba(21,57,155,0.1);
}
a.zvi-unified-item { display: block; }
.zvi-chevron-badge {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(79,100,176,0.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-link, #4F64B0);
    flex-shrink: 0;
}
.zvi-chevron-badge svg { width: 14px; height: 14px; fill: currentColor; transform: rotate(90deg); }

.zvi-drawer-footer {
    padding: 16px;
    background: #ffffff;
    box-shadow: 0 -6px 16px rgba(0,0,0,0.06);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}
.zvi-hero-buttons { display: flex; flex-direction: row; gap: 10px; }
.zvi-hero-buttons .cta-button {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    height: 46px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color 0.2s ease;
}
.zvi-hero-buttons .cta-button svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.zvi-hero-buttons .cta-button.zvi-bg-blue {
    border: 2px solid var(--color-link, #4F64B0);
    color: var(--color-link, #4F64B0);
    background: transparent;
}
.zvi-hero-buttons .cta-button.zvi-bg-blue:hover { background-color: rgba(79,100,176,0.06); }
.zvi-hero-buttons .cta-button.zvi-bg-red {
    border: 2px solid transparent;
    color: #ffffff;
    background-color: var(--accent-red, #CF3834);
    box-shadow: 0 4px 12px rgba(207,56,52,0.2);
}
.zvi-hero-buttons .cta-button.zvi-bg-red:hover { background-color: #b02a27; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================
   11. AJAX LIVE SEARCH RESULTS (Dropdown)
   ========================================= */
#zvi-search-results {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    margin-top: 8px;
    background-color: #ffffff;
    border: 1px solid var(--sb-border, #E5E5E5);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    max-height: 380px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.zvi-search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zvi-search-result-item {
    border-bottom: 1px solid #f0f0f0;
}
.zvi-search-result-item:last-child {
    border-bottom: none;
}

.zvi-search-result-link {
    display: block;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--color-text-main, #1A1800);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.zvi-search-result-link:hover,
.zvi-search-result-link:focus {
    background-color: #f5f6fa;
    color: var(--color-link, #4F64B0);
}

.zvi-search-all-wrapper {
    background-color: #f9f9fb;
    border-top: 1px solid var(--sb-border, #E5E5E5);
    position: sticky;
    bottom: 0;
}
.zvi-search-all-link {
    display: block;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    color: var(--color-link, #4F64B0);
    font-weight: 700;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}
.zvi-search-all-link:hover,
.zvi-search-all-link:focus {
    background-color: #f0f2f8;
}

.zvi-no-results {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted, #666);
    font-size: 0.95rem;
}

#zvi-search-spinner {
    position: absolute;
    inset-inline-end: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* =========================================
   12. POST FOOTER MODULES
   ========================================= */
.zvi-gyg-section-custom { margin-top: 50px; text-align: center; }
.zvi-gyg-btn-wrapper { margin-top: 20px; }
.zvi-social-unique-margin { margin-top: 60px; }
.zvi-related-wrapper-margin { margin-top: 40px; }

@media (min-width: 1024px) {
    .zvi-post-footer-modules > div { margin-right: auto; margin-left: auto; max-width: 780px; width: 100%; box-sizing: border-box; }
}

.franco-related-wrapper { margin-top: 50px; border-top: 1px solid #eee; padding-top: 34px; }
.franco-related-title {
    font-family: var(--font-heading);
    color: var(--color-link);
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 8px;
}
.franco-related-title::after {
    content: '';
    display: block;
    width: 48px; height: 3px;
    background: var(--color-link);
    border-radius: 2px;
    margin: 14px auto 20px;
}

/* =========================================
   13. UX AUDIT — פונטים, פוקוס ותקיעת ריחוף במגע
   נוסף בסוף הקובץ בכוונה: אפס מחיקות, כל דריסה מסתמכת על סדר הקסקדה.
   ========================================= */

/* ---------------------------------------------------------
   13.1 שלוש כותרות שלא קיבלו font-family בכלל
   אותה תבנית מ-.fa-attr-name ו-.fa-contact-label מהקובץ CSS - Page Elements:
   אלו הם DIV/SPAN שמשמשים ככותרת אבל אף פעם לא קיבלו Heebo, ונפלו
   ל-Assistant של ה-body בשקט.
   --------------------------------------------------------- */
.zvi-sub-title,
.zvi-drawer-heading,
.zvi-drawer-level-title {
    font-family: var(--font-heading);
}

/* ---------------------------------------------------------
   13.2 מיקוד מקלדת על קישורים שיושבים על רקע כחול
   a.zvi-tag (תגיות קטגוריה בהדר הכתבה) ו-.zvi-meta-link (קישור מחבר/תאריך ברצועת
   המטא), שניהם יושבים על הגרדיאנט הכחול ב-.zvi-header-wrapper, לא קיבלו מעולם
   טבעת מיקוד משלהם. בלי זה, טבעת המיקוד הכחול של הדפדפן (לעתים כחול) עלולה
   להיבלע על רקע כחול דומה — בדיוק אותה בעיה שכבר קיבל טיפול לבן דומה:
   .zvi-nav-icon-btn, .zvi-h3-toggle, .zvi-in-article-toggle.
   --------------------------------------------------------- */
a.zvi-tag:focus-visible,
.zvi-meta-link:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ---------------------------------------------------------
   13.3 ריחוף "נתקע" במגע — אותה תבנית שכבר תוקנה ב-Page Elements (41.8)
   .zvi-popular-grid-item ו-a.zvi-tag מזיזות עצמן ב-:hover (translateY) ונמצאות
   במקומות שנוגעים בהם במגע בפועל (מגירת ההמבורגר וההדר), כלומר אותה בואג
   לאחר נגיעה עד לנגיעה הבאה.
   --------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
    .zvi-popular-grid-item:hover,
    a.zvi-tag:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------
   13.4 יעד נגיעה — "לצפייה בכל X התוצאות" בתוצאות החיפוש
   היה בעודף כ-41px (padding: 12px + טקסט ~17px) — מתחת ליעד ה-44px.
   --------------------------------------------------------- */
.zvi-search-all-link {
    padding-block: 14px;
    min-height: 44px;
    box-sizing: border-box;
}
/* ---------------------------------------------------------
   13.5 פריטי המגירה (מובייל) — Heebo במקום Assistant עבה
   .zvi-popular-grid-item ("מלונות מומלצים", "מגדל אייפל" וכו') ו-.zvi-unified-item
   ("מידע על פריז", "מחוזות צרפת" וכו') יושבים מחוץ ל-#zvi-header-root,
   ולכן לא קיבלו את ה-Heebo שהוחל על כל אלמנט בהדר (13.5 ב-CSS - Header
   and Single Post עצמו); הם נפלו ל-Assistant של ה-body במשקל עבה (600).
   --------------------------------------------------------- */
.zvi-popular-grid-item,
.zvi-unified-item {
    font-family: var(--font-heading);
}
/* ---------------------------------------------------------
   13.6 מודול "הכי פופולרי בפריז" בתוך כתבה (שורטקוד zvi_paris_icons)
   אותן המחלקות של מגירת התפריט. המודיפייר --in-article משנה אך ורק
   את מספר העמודות בדסקטופ (3 במקום 2), כי עמודת התוכן רחבה
   בהרבה מהמגירה. במובייל נשארות 2 עמודות — בדיוק כמו בתפריט.
   אפס מחיקות: הכלל הבסיסי של .zvi-popular-grid נשאר כשהיה.
   --------------------------------------------------------- */
@media (min-width: 769px) {
    .zvi-popular-grid.zvi-popular-grid--in-article {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

/* ---------------------------------------------------------
   13.7 כותרת ותת-כותרת של מודול הכי פופולרי בפריז בתוך כתבה
   כותרת סקציה מלאה בכל הרזולוציות: גופן גדול, ללא הפס האדום,
   עם קו הפרדה מתחתיה ותת-כותרת מתחת. ה-clamp מקטין את הגופן
   בהדרגה במובייל (22px) ועד 32px בדסקטופ.
   הכל ממוקד ב-.zvi-popular-module בלבד, כך ש-.zvi-drawer-heading
   של מגירת התפריט לא מושפעת בכלל. אפס מחיקות.
   --------------------------------------------------------- */
.zvi-popular-module .zvi-popular-module-title {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-text-main, #1A1800);
    padding: 0 0 12px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--sb-border, #D7D7D6);
}
.zvi-popular-module .zvi-popular-module-title::before {
    content: none;
}

.zvi-popular-module-subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted, #555555);
    margin: 0 0 16px;
    padding: 0;
}

@media (min-width: 769px) {
    .zvi-popular-module .zvi-popular-module-title {
        padding: 0 0 16px;
        margin: 0 0 18px;
    }
    .zvi-popular-module .zvi-popular-module-subtitle {
        font-size: 1.05rem;
        margin: 0 0 24px;
    }
}

/* ===== Element 133999: CSS – STAY FINDER ===== */
/* =====================================================================
   אשף הלינה — [zvi_stay_finder]
   כל הצבעים, הרדיוסים והצללים נלקחים ממערכת העיצוב של האתר
   (CSS - Page Elements). אין כאן ערך צבע קשיח אחד.
   ================================================================== */

/* מודל קופסה אחיד: בלי זה, אלמנטים ברוחב מלא שיש להם מרווח פנימי
   או מסגרת חורגים מהמסגרת של הרכיב. */
.zvi-sf,
.zvi-sf *,
.zvi-sf *::before,
.zvi-sf *::after {
	box-sizing: border-box;
}

.zvi-sf {
	direction: rtl;
	text-align: right;
	font-family: var(--font-body);
	color: var(--fa-ink);
	background: var(--fa-bg-gray);
	border: 1px solid var(--fa-bg-gray-border);
	border-radius: var(--fa-radius-lg);
	box-shadow: var(--fa-shadow-card);
	padding: 28px 24px;
	margin: 36px 0;
	line-height: 1.65;
}

/* --- כותרת --------------------------------------------------------- */

.zvi-sf__head {
	margin-bottom: 22px;
}

.zvi-sf__eyebrow {
	margin: 0 0 6px;
	font-family: var(--font-heading);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-link);
}

.zvi-sf__title {
	margin: 0 0 8px;
	font-family: var(--font-heading);
	font-size: 1.6rem;
	line-height: 1.3;
	color: var(--fa-ink);
}

.zvi-sf__lede {
	margin: 0;
	font-size: 1rem;
	color: var(--fa-text-muted);
	max-width: 62ch;
}

/* --- מחווני התקדמות ------------------------------------------------ */

.zvi-sf__dots {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
}

.zvi-sf__dot {
	width: 34px;
	height: 4px;
	border-radius: var(--radius-pill);
	background: var(--fa-card-border);
	transition: background-color 0.25s ease;
}

.zvi-sf__dot.is-active {
	background: var(--color-link);
}

.zvi-sf__dot.is-done {
	background: var(--fa-amber);
}

/* --- שלבי השאלון --------------------------------------------------- */

.zvi-sf__step {
	display: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.zvi-sf__step.is-active {
	display: block;
}

.zvi-sf__q {
	display: block;
	float: none;
	width: 100%;
	padding: 0;
	margin: 0 0 4px;
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--fa-ink);
}

.zvi-sf__hint {
	margin: 0 0 14px;
	font-size: 0.92rem;
	color: var(--fa-text-light);
	max-width: 60ch;
}

.zvi-sf__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.zvi-sf__opt {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sb-bg);
	border: 1px solid var(--fa-card-border);
	border-radius: var(--radius-pill);
	color: var(--fa-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.95rem;
	font-weight: var(--btn-font-weight);
	line-height: 1.2;
	min-height: 44px;
	padding: var(--btn-padding-y) 18px;
	text-align: center;
	transition: var(--btn-transition);
}

.zvi-sf__opt:hover {
	border-color: var(--color-link);
	background: var(--fa-purple-soft);
	color: var(--color-link-hover);
}

.zvi-sf__opt:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.zvi-sf__opt.is-chosen {
	background: var(--color-link);
	border-color: var(--color-link);
	color: #ffffff;
}

.zvi-sf__opt--wide {
	flex-basis: 100%;
}

/* בכל בחירה מרובה, המצב הלא-נבחר הוא מתאר כחול. כך ברור מיד
   שאלה מתגים ושאפשר לסמן כמה מהם, ובשני השלבים באותה שפה. */
.zvi-sf__opt[data-multi]:not(.is-chosen),
.zvi-sf__opt--all {
	background: var(--sb-bg);
	border-color: var(--color-link);
	color: var(--color-link);
	font-weight: var(--btn-font-weight);
}

.zvi-sf__opt[data-multi]:not(.is-chosen):hover,
.zvi-sf__opt--all:hover {
	background: var(--fa-purple-soft);
	border-color: var(--color-link-hover);
	color: var(--color-link-hover);
}

.zvi-sf__opt--all {
	font-weight: 700;
}

/* --- כפתורי מעבר בין שלבים -------------------------------------- */

.zvi-sf__actions--split {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.zvi-sf__next,
.zvi-sf__select-all {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	min-height: 52px;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	border-radius: var(--btn-border-radius);
	border: 1px solid transparent;
	text-align: center;
	transition: var(--btn-transition);
}

.zvi-sf__next {
	flex: 1 1 220px;
	width: 100%;
	background: var(--color-link);
	border-color: var(--color-link);
	color: #ffffff;
}

.zvi-sf__next:hover {
	background: var(--color-link-hover);
	border-color: var(--color-link-hover);
}

.zvi-sf__actions--split .zvi-sf__next {
	width: auto;
}

.zvi-sf__select-all {
	flex: 1 1 220px;
	background: var(--sb-bg);
	border-color: var(--color-link);
	color: var(--color-link);
	font-weight: var(--btn-font-weight);
}

.zvi-sf__select-all:hover {
	background: var(--fa-purple-soft);
	border-color: var(--color-link-hover);
	color: var(--color-link-hover);
}

.zvi-sf__next:focus-visible,
.zvi-sf__select-all:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* --- שדות התאריכים ------------------------------------------------- */

.zvi-sf__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.zvi-sf__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 4px;
}

.zvi-sf__date-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 200px;
	max-width: 260px;
}

.zvi-sf__date-label {
	font-size: 0.88rem;
	font-weight: var(--btn-font-weight);
	color: var(--fa-text-muted);
}

.zvi-sf__date {
	width: 100%;
	background: var(--sb-bg);
	border: 1px solid var(--fa-card-border);
	border-radius: var(--btn-border-radius);
	color: var(--fa-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.2;
	min-height: 52px;
	padding: var(--btn-padding-y) 14px;
	direction: rtl;
	text-align: right;
}

.zvi-sf__date:focus {
	border-color: var(--color-link);
	outline: var(--focus-ring-width) solid var(--tint-link);
	outline-offset: 0;
}

.zvi-sf__date::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.6;
}

.zvi-sf__step-error,
.zvi-sf__date-error {
	margin: 12px 0 0;
	padding: 10px 14px;
	background: var(--sb-bg);
	border: 1px solid var(--accent-red);
	border-radius: var(--fa-radius-sm);
	color: var(--accent-red);
	font-size: 0.9rem;
}

.zvi-sf__actions {
	margin-top: 20px;
}

/* --- כפתורים ראשיים ------------------------------------------------ */

.zvi-sf__submit,
.zvi-sf__cta {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-link);
	border: 1px solid var(--color-link);
	border-radius: var(--btn-border-radius);
	box-shadow: var(--fa-shadow-purple);
	color: #ffffff;
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	min-height: 48px;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	text-align: center;
	text-decoration: none;
	transition: var(--btn-transition);
}

.zvi-sf__submit:hover,
.zvi-sf__cta:hover,
.zvi-sf__cta:focus {
	background: var(--color-link-hover);
	border-color: var(--color-link-hover);
	color: #ffffff;
	text-decoration: none;
}

.zvi-sf__submit:focus-visible,
.zvi-sf__cta:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* --- ניווט וסיכום -------------------------------------------------- */

.zvi-sf__nav {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--rule-soft);
}

.zvi-sf__back {
	appearance: none;
	background: none;
	border: 0;
	color: var(--color-link);
	cursor: pointer;
	font: inherit;
	font-size: 0.92rem;
	min-height: 44px;
	padding: 0 4px;
	text-decoration: underline;
}

.zvi-sf__back:hover {
	color: var(--color-link-hover);
}

.zvi-sf__back:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.zvi-sf__summary {
	margin: 0;
	font-size: 0.88rem;
	color: var(--fa-text-light);
}

/* --- מצב טעינה ----------------------------------------------------- */

/* כלל הכרחי: הגדרת display מפורשת גוברת על תכונת ההסתרה של HTML,
   ולכן חייבים לבטל אותה במפורש עבור כל אלמנט מוסתר ברכיב. */
.zvi-sf [hidden] {
	display: none !important;
}

.zvi-sf__loading {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 26px 0;
}

.zvi-sf__loading:not([hidden]) {
	display: flex;
}

.zvi-sf__spinner {
	width: 22px;
	height: 22px;
	border: 3px solid var(--fa-card-border);
	border-top-color: var(--color-link);
	border-radius: 50%;
	flex: 0 0 auto;
	animation: zvi-sf-spin 0.8s linear infinite;
}

@keyframes zvi-sf-spin {
	to {
		transform: rotate(360deg);
	}
}

.zvi-sf__loading-text {
	margin: 0;
	color: var(--fa-text-muted);
}

/* --- הודעת שגיאה --------------------------------------------------- */

.zvi-sf__error {
	background: var(--sb-bg);
	border: 1px solid var(--accent-red);
	border-radius: var(--fa-radius-sm);
	color: var(--accent-red);
	margin-bottom: 18px;
	padding: 12px 16px;
	font-size: 0.94rem;
}

/* --- תוצאות -------------------------------------------------------- */

.zvi-sf__results:focus {
	outline: none;
}

.zvi-sf__intro {
	background: var(--fa-purple-soft);
	border-radius: var(--fa-radius-sm);
	margin-bottom: 20px;
	padding: 14px 18px;
}

.zvi-sf__intro p {
	margin: 0;
	font-size: 1rem;
	color: var(--fa-ink);
}

.zvi-sf__notice {
	background: var(--sb-bg);
	border: 1px solid var(--fa-amber);
	border-right-width: 4px;
	border-radius: var(--fa-radius-sm);
	margin-bottom: 20px;
	padding: 14px 18px;
}

.zvi-sf__notice p {
	margin: 0;
	font-size: 0.98rem;
	color: var(--fa-text);
}

/* --- שורת המיון --------------------------------------------------- */

.zvi-sf__sort:not(:empty) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rule-soft);
}

.zvi-sf__sort-label {
	font-size: 0.88rem;
	font-weight: var(--btn-font-weight);
	color: var(--fa-text-light);
	margin-left: 4px;
}

.zvi-sf__sort-note {
	font-size: 0.84rem;
	color: var(--fa-text-light);
	margin-right: 4px;
}

.zvi-sf__sort-btn {
	appearance: none;
	background: var(--sb-bg);
	border: 1px solid var(--fa-card-border);
	border-radius: var(--radius-pill);
	color: var(--fa-text-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.86rem;
	line-height: 1.2;
	min-height: 38px;
	padding: 8px 14px;
	transition: var(--btn-transition);
}

.zvi-sf__sort-btn:hover {
	border-color: var(--color-link);
	color: var(--color-link);
}

.zvi-sf__sort-btn.is-chosen {
	background: var(--color-link);
	border-color: var(--color-link);
	color: #ffffff;
}

.zvi-sf__sort-btn:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.zvi-sf__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.zvi-sf__card {
	background: var(--card-bg-color);
	border: 1px solid var(--fa-card-border);
	border-radius: var(--fa-radius-md);
	box-shadow: var(--fa-shadow-card);
	display: grid;
	grid-template-columns: 210px 1fr;
	overflow: hidden;
	transition: var(--card-transition);
}

.zvi-sf__card:hover {
	box-shadow: var(--fa-shadow-soft);
}

.zvi-sf__card--noimg {
	grid-template-columns: 1fr;
}

.zvi-sf__card-media {
	margin: 0;
	min-height: 100%;
}

.zvi-sf__img {
	width: 100%;
	height: 100%;
	min-height: 180px;
	object-fit: cover;
	display: block;
}

.zvi-sf__card-body {
	padding: 20px 22px;
}

.zvi-sf__card-name {
	margin: 0 0 4px;
	font-family: var(--font-heading);
	font-size: 1.2rem;
	line-height: 1.35;
	color: var(--fa-ink);
}

.zvi-sf__card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 0.88rem;
}

.zvi-sf__stars {
	color: var(--fa-amber);
	letter-spacing: 0.06em;
}

.zvi-sf__meta-text {
	color: var(--fa-text-light);
}

.zvi-sf__area {
	color: var(--color-link);
	font-weight: var(--btn-font-weight);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.zvi-sf__area:hover {
	color: var(--color-link-hover);
}

/* הפתק האישי — האלמנט המזוהה של הרכיב.
   מוגדר במפורש כדי שלא יירש עיצוב ציטוט מהתבנית. */
.zvi-sf__note {
	margin: 0 0 16px;
	padding: 0 14px 0 0;
	border: 0;
	border-right: 3px solid var(--fa-amber);
	background: none;
	box-shadow: none;
	quotes: none;
}

.zvi-sf__note::before,
.zvi-sf__note::after,
.zvi-sf__note p::before,
.zvi-sf__note p::after {
	content: none;
	display: none;
}

.zvi-sf__note p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--fa-text);
}

.zvi-sf__card-links {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 14px;
}

/* שני הכפתורים חולקים מידות זהות, כדי שייראו כזוג ולא כראשי ומשני. */
.zvi-sf__card-links .zvi-sf__cta,
.zvi-sf__card-links .zvi-sf__readmore {
	box-sizing: border-box;
	flex: 1 1 0;
	max-width: 250px;
	min-height: 52px;
	padding: var(--btn-padding-y) 18px;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--btn-border-radius);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

.zvi-sf__readmore {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sb-bg);
	border: 1px solid var(--color-link);
	border-radius: var(--btn-border-radius);
	color: var(--color-link);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: var(--btn-font-weight);
	line-height: 1.2;
	min-height: 48px;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	text-align: center;
	transition: var(--btn-transition);
}

.zvi-sf__readmore:hover {
	background: var(--fa-purple-soft);
	border-color: var(--color-link-hover);
	color: var(--color-link-hover);
}

.zvi-sf__readmore:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.zvi-sf__extra {
	background: var(--fa-bg-gray);
	border-radius: var(--fa-radius-sm);
	margin: 0 0 16px;
	padding: 14px 16px;
}

.zvi-sf__extra p {
	margin: 0;
	font-size: 0.96rem;
	line-height: 1.65;
	color: var(--fa-text);
}

/* כפתור השיתוף נשאר ריבועי וצמוד, כדי לא לגזול מקום משני הראשיים. */
.zvi-sf__share {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	min-height: 52px;
	padding: 0;
	background: var(--sb-bg);
	border: 1px solid var(--fa-card-border);
	border-radius: var(--btn-border-radius);
	color: #25D366;
	cursor: pointer;
	font: inherit;
	text-decoration: none;
	transition: var(--btn-transition);
}

.zvi-sf__share:hover,
.zvi-sf__share:focus {
	background: #25D366;
	border-color: #25D366;
	color: #ffffff;
	text-decoration: none;
}

.zvi-sf__share:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.zvi-sf__share-icon {
	display: block;
}

.zvi-sf__more-wrap {
	margin-top: 18px;
}

.zvi-sf__more-btn {
	appearance: none;
	display: block;
	width: 100%;
	background: var(--sb-bg);
	border: 1px solid var(--color-link);
	border-radius: var(--btn-border-radius);
	color: var(--color-link);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	min-height: 52px;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	text-align: center;
	transition: var(--btn-transition);
}

.zvi-sf__more-btn:hover {
	background: var(--fa-purple-soft);
	border-color: var(--color-link-hover);
	color: var(--color-link-hover);
}

.zvi-sf__more-btn:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.zvi-sf__more-btn[disabled] {
	cursor: default;
	opacity: 0.6;
}

.zvi-sf__more-count {
	font-weight: var(--btn-font-weight);
	opacity: 0.75;
}

.zvi-sf__exhausted {
	margin: 0;
	padding: 16px 18px;
	background: var(--fa-bg-gray);
	border-radius: var(--fa-radius-sm);
	text-align: center;
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--fa-text-muted);
}

.zvi-sf__area-wrap:not(:empty) {
	margin-top: 12px;
}

.zvi-sf__area-btn {
	display: block;
	width: 100%;
	background: var(--fa-purple-soft);
	border: 1px solid var(--color-link);
	border-radius: var(--btn-border-radius);
	color: var(--color-link-hover);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 15px var(--btn-padding-x);
	text-align: center;
	text-decoration: none;
	transition: var(--btn-transition);
}

.zvi-sf__area-btn:hover,
.zvi-sf__area-btn:focus {
	background: var(--color-link);
	color: #ffffff;
	text-decoration: none;
}

.zvi-sf__area-btn:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* --- כותרת תחתונה -------------------------------------------------- */

.zvi-sf__footer {
	border-top: 1px solid var(--rule-soft);
	margin-top: 24px;
	padding-top: 16px;
}

.zvi-sf__disclosure {
	margin: 0 0 14px;
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--fa-text-lighter);
}

.zvi-sf__footer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.zvi-sf__addareas,
.zvi-sf__restart {
	appearance: none;
	display: inline-flex;
	flex: 1 1 220px;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	cursor: pointer;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.2;
	min-height: 48px;
	padding: var(--btn-padding-y) 22px;
	text-align: center;
	transition: var(--btn-transition);
}

/* הרחבת הרובעים היא הפעולה שמקדמת את הקורא, ולכן היא הבולטת מהשתיים. */
.zvi-sf__addareas {
	background: var(--fa-purple-soft);
	border: 1px solid var(--color-link);
	color: var(--color-link-hover);
	font-weight: 700;
}

.zvi-sf__addareas:hover {
	background: var(--color-link);
	border-color: var(--color-link);
	color: #ffffff;
}

.zvi-sf__restart {
	background: var(--sb-bg);
	border: 1px solid var(--fa-card-border);
	color: var(--fa-text);
}

.zvi-sf__restart:hover {
	border-color: var(--color-link);
	background: var(--fa-purple-soft);
	color: var(--color-link-hover);
}

.zvi-sf__addareas:focus-visible,
.zvi-sf__restart:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

/* --- מובייל -------------------------------------------------------- */

@media (max-width: 640px) {

	.zvi-sf {
		padding: 22px 16px;
		border-radius: var(--fa-radius-md);
	}

	.zvi-sf__title {
		font-size: 1.35rem;
	}

	.zvi-sf__opt {
		flex: 1 1 calc(50% - 8px);
	}

	.zvi-sf__card {
		grid-template-columns: 1fr;
	}

	.zvi-sf__img {
		min-height: 190px;
		max-height: 220px;
	}

	.zvi-sf__card-body {
		padding: 16px;
	}

	.zvi-sf__card-links .zvi-sf__readmore {
		flex: 1 1 100%;
		max-width: none;
	}

	.zvi-sf__card-links .zvi-sf__cta {
		flex: 1 1 auto;
		max-width: none;
	}
}

/* --- העדפת תנועה מופחתת -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.zvi-sf__spinner {
		animation-duration: 3s;
	}

	.zvi-sf__opt,
	.zvi-sf__submit,
	.zvi-sf__cta,
	.zvi-sf__restart,
	.zvi-sf__card,
	.zvi-sf__dot {
		transition: none;
	}
}

/* =====================================================================
   כרטיסי המלצה בגוף כתבה  —  .zvi-sf-cards
   אותו כרטיס של אשף הלינה, בלי המסגרת של הרכיב, עם ניטרול הירושות
   של תבנית הכתבה (ציטוט, רשימה, כותרות, תמונות).
   ================================================================== */

.zvi-sf-cards,
.zvi-sf-cards *,
.zvi-sf-cards *::before,
.zvi-sf-cards *::after {
	box-sizing: border-box;
}

.zvi-sf-cards {
	direction: rtl;
	text-align: right;
	font-family: var(--font-body);
	color: var(--fa-ink);
	line-height: 1.65;
	margin: 32px 0;
}

.zvi-sf-cards .zvi-sf__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zvi-sf-cards .zvi-sf__list > li {
	margin: 0;
	padding: 0;
}

.zvi-sf-cards .zvi-sf__list > li::marker {
	content: none;
}

.zvi-sf-cards .zvi-sf__card-name {
	margin: 0 0 4px;
	font-family: var(--font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fa-ink);
}

.zvi-sf-cards .zvi-sf__card-meta {
	margin: 0 0 14px;
	font-size: 0.88rem;
}

.zvi-sf-cards .zvi-sf__note,
.zvi-sf-cards .zvi-sf__note p,
.zvi-sf-cards .zvi-sf__extra p {
	font-style: normal;
}

.zvi-sf-cards .zvi-sf__extra p + p {
	margin-top: 12px;
}

.zvi-sf-cards .zvi-sf__card-media img {
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

/* --- התמונה נמתחת לכל גובה הכרטיס, בלי מרווח לבן מתחתיה --- */

.zvi-sf__card-media {
	position: relative;
	align-self: stretch;
	overflow: hidden;
	min-height: 180px;
}

.zvi-sf__card-media .zvi-sf__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

/* --- תג ההמלצה, על גבי התמונה --- */

.zvi-sf__flag {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	max-width: calc(100% - 16px);
	padding: 7px 13px;
	background: var(--accent-red);
	color: #ffffff;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.25;
	border-bottom-left-radius: var(--fa-radius-sm);
}

@media (max-width: 640px) {

	.zvi-sf__card-media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.zvi-sf-cards .zvi-sf__card-links .zvi-sf__readmore {
		flex: 1 1 100%;
		max-width: none;
	}
}


/* קישור הרובע בשורת המטא: הכלל הגלובלי p a מוסיף border-bottom,
   ומתקבל קו כפול מעל הקו של text-decoration. */

.zvi-sf__card-meta a {
	border-bottom: 0;
	box-shadow: none;
}

.zvi-sf__card-meta a:hover {
	border-bottom: 0;
	background-color: transparent;
}


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

.zvi-sf__card-links .zvi-sf__morelink {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	max-width: 250px;
	min-height: 48px;
	padding: var(--btn-padding-y) 18px;
	background: none;
	border: 0;
	color: var(--color-link);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: var(--btn-transition);
}

.zvi-sf__card-links .zvi-sf__morelink:hover,
.zvi-sf__card-links .zvi-sf__morelink:focus {
	background: none;
	border: 0;
	color: var(--color-link-hover);
	text-decoration: underline;
}

.zvi-sf__card-links .zvi-sf__morelink:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

@media (max-width: 640px) {

	.zvi-sf__card-links .zvi-sf__morelink {
		flex: 1 1 100%;
		max-width: none;
	}
}


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

.zvi-sf__extra .fa-pros-cons {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	padding: 0;
	width: auto;
}

.zvi-sf__extra .fa-pros-cons ul {
	margin: 0;
	padding: 0;
	gap: 10px;
}

.zvi-sf__extra .fa-pros-cons li {
	font-size: 0.96rem;
	line-height: 1.55;
	margin: 0;
}


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

.zvi-sf__card--clamp .zvi-sf__note p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.zvi-sf__card--clamp.is-open .zvi-sf__note p {
	display: block;
	overflow: visible;
}


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

.zvi-sf__card-body {
	position: relative;
}

.zvi-sf__share--corner {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	width: 38px;
	min-height: 38px;
}

.zvi-sf__card-body:has(.zvi-sf__share--corner) .zvi-sf__card-name {
	padding-inline-end: 50px;
}


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

.zvi-sf__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--fa-radius-sm);
	background: var(--fa-bg-gray);
}

.zvi-sf__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}


/* הפתק מצטמצם לשתי שורות ונפתח בלחיצה על מידע נוסף.
   התנאי הוא שיש קופסת zvi-sf__extra, כלומר שיש כפתור שפותח.
   כרטיס בלי קופסה נשאר פתוח, כדי שלא נסתיר טקסט בלי דרך לחשוף אותו. */

.zvi-sf__card-body:has(.zvi-sf__extra) .zvi-sf__note p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.zvi-sf__card.is-open .zvi-sf__note p {
	display: block;
	overflow: visible;
}


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

.zvi-sf__card-emoji {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fa-bg-gray);
	font-size: clamp(2.75rem, 6vw, 4.25rem);
	line-height: 1;
	text-align: center;
	user-select: none;
}


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

.zvi-sf-tiles,
.zvi-sf-tiles *,
.zvi-sf-tiles *::before,
.zvi-sf-tiles *::after {
	box-sizing: border-box;
}

.zvi-sf-tiles {
	direction: rtl;
	text-align: right;
	font-family: var(--font-body);
	margin: 32px 0;
}

.zvi-sf__tile-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
}

.zvi-sf__tile-list > li {
	margin: 0;
	padding: 0;
}

.zvi-sf__tile-list > li::marker {
	content: none;
}

.zvi-sf-tiles .zvi-sf__tile {
	display: block;
	height: 100%;
	overflow: hidden;
	background: var(--card-bg-color);
	border: 1px solid var(--fa-card-border);
	border-bottom: 1px solid var(--fa-card-border);
	border-radius: var(--fa-radius-md);
	box-shadow: var(--fa-shadow-card);
	color: var(--fa-ink);
	text-decoration: none;
	transition: var(--card-transition);
}

.zvi-sf-tiles .zvi-sf__tile:hover,
.zvi-sf-tiles .zvi-sf__tile:focus {
	box-shadow: var(--fa-shadow-soft);
	background: var(--card-bg-color);
}

.zvi-sf-tiles .zvi-sf__tile:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

.zvi-sf__tile-media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--fa-bg-gray);
}

.zvi-sf-tiles .zvi-sf__tile-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

.zvi-sf__tile-emoji {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	line-height: 1;
	user-select: none;
}

.zvi-sf__tile-body {
	display: block;
	padding: 14px 16px 16px;
	text-align: center;
}

.zvi-sf__tile-title {
	display: block;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--color-link);
}

.zvi-sf-tiles .zvi-sf__tile:hover .zvi-sf__tile-title {
	color: var(--color-link-hover);
}

.zvi-sf__tile-cta {
	display: block;
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 640px) {

	.zvi-sf__tile-list {
		grid-template-columns: 1fr;
	}
}


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

.zvi-sf-prices,
.zvi-sf-prices *,
.zvi-sf-prices *::before,
.zvi-sf-prices *::after {
	box-sizing: border-box;
}

.zvi-sf-prices {
	direction: rtl;
	text-align: right;
	font-family: var(--font-body);
	margin: 32px 0;
}

.zvi-sf__price-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}

.zvi-sf__price-list > li {
	margin: 0;
	padding: 0;
}

.zvi-sf__price-list > li::marker {
	content: none;
}

.zvi-sf__price {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 10px;
	padding: 20px 18px;
	background: var(--card-bg-color);
	border: 1px solid var(--fa-card-border);
	border-radius: var(--fa-radius-md);
	box-shadow: var(--fa-shadow-card);
	text-align: center;
	transition: var(--card-transition);
}

.zvi-sf__price:hover {
	box-shadow: var(--fa-shadow-soft);
}

.zvi-sf__price-icon {
	font-size: 2.25rem;
	line-height: 1;
	user-select: none;
}

.zvi-sf__price-name {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fa-ink);
}

.zvi-sf__price-desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--fa-text);
}

.zvi-sf__price-foot {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}

.zvi-sf__coupon {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--fa-bg-gray);
	border: 1px dashed var(--color-link);
	border-radius: var(--fa-radius-sm);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-link);
	transition: var(--btn-transition);
}

.zvi-sf__coupon:hover,
.zvi-sf__coupon:focus-visible {
	background: var(--fa-purple-soft);
}

.zvi-sf__coupon:focus-visible {
	outline: var(--focus-ring-width) solid var(--focus-ring-color);
	outline-offset: var(--focus-ring-offset);
}

@media (max-width: 640px) {

	.zvi-sf__price-list {
		grid-template-columns: 1fr;
	}
}


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

.zvi-sf__extra > * + * {
	margin-top: 14px;
}


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

.zvi-sf__note > * + * {
	margin-top: 12px;
}


/* wpautop ממיר שורה בודדת בתוכן קלאסי ל-<br>, ואם השורה הזאת יושבת
   בין פתיחת הכרטיס לתמונה, ה-<br> הופך לפריט פלקס ותופס שורה לבנה.
   הסלקטור מכוון לילד ישיר בלבד, ולכן אינו נוגע ב-<br> שבתוך פסקה. */

.zvi-sf__card > br,
.zvi-sf__tile > br,
.zvi-sf__price > br,
.zvi-article-card > br,
.zvi-uni-card > br,
.zvi-hotel-card > br,
.fa-product-card > br,
.zvi-ticket-card > br,
.zvi-sf__card-body > br,
.zvi-sf__tile-body > br {
	display: none;
}


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

.zvi-sf__extra {
	background: none;
	border-radius: 0;
	padding: 0;
}

.zvi-sf__extra > p {
	margin: 0;
	background: var(--fa-bg-gray);
	border-radius: var(--fa-radius-sm);
	padding: 14px 16px;
}

.zvi-sf__extra .fa-pros-cons {
	background: var(--fa-bg-gray);
	border-radius: var(--fa-radius-sm);
	padding: 14px 16px;
	margin: 0;
	border: 0;
	box-shadow: none;
	width: auto;
}


/* קופסת הכותב. קודם לכן היא שאבה את העיצוב מ-zvi-hotel-card,
   והייתה תלויה במשפחה שהתיישנה. הכללים כאן עומדים בפני עצמם
   ונטענים בכל דף, בשונה מ-Element 133175 שנטען בתנאים בלבד. */

.zvi-author-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	min-width: 0;
	box-sizing: border-box;
	background-color: var(--card-bg-color);
	border: 1px solid var(--sb-border);
	border-radius: var(--card-border-radius);
	box-shadow: var(--card-shadow-base);
	transition: var(--card-transition);
	padding: 30px 20px;
	margin: 40px 0 20px;
	overflow: hidden;
}

.zvi-author-card:hover {
	box-shadow: var(--card-shadow-hover);
}

.zvi-author-content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
	gap: 16px;
	align-items: center;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}

.zvi-author-title {
	font-family: var(--font-heading);
	font-size: clamp(22px, 4vw, 26px);
	font-weight: 700;
	color: var(--color-link);
	margin: 0;
	line-height: 1.3;
	padding: 0;
	width: 100%;
	text-align: center;
	display: block;
}

.zvi-author-socials {
	display: flex;
	gap: 15px;
	justify-content: center;
	margin: 15px 0 20px;
}


/* כותרת אריח שהיא כותרת אמיתית, לביטול המרווחים של הדפדפן. */

h1.zvi-sf__tile-title,
h2.zvi-sf__tile-title,
h3.zvi-sf__tile-title,
h4.zvi-sf__tile-title,
h5.zvi-sf__tile-title,
h6.zvi-sf__tile-title {
	margin: 0;
	padding: 0;
}


/* ==================================================================
   סרטון בתוך "מידע נוסף" בכרטיס zvi-sf__card (אוגוסט 2026).
   הכרטיס מציג תמונה רגילה, והסרטון נפתח רק בלחיצה על "מידע נוסף".
   ================================================================== */
.zvi-sf__extra .zvi-sf__video {
  margin-top: 14px;
}


/* ==================================================================
   כרטיס עם שני כפתורים בלבד (מידע נוסף + קישור לכתבה):
   הקישור לכתבה מעוצב ככפתור כוחל מלא. כשיש שלושה כפתורים
   (מידע נוסף, הזמנת כרטיסים וקישור לכתבה) הוא נשאר קישור.
   הבדיקה היא :only-of-type על תג a, כי כפתור "מידע נוסף" הוא button
   ולכן הוא לא נספר. אם יש גם zvi-sf__cta הכלל לא יחול.
   ================================================================== */
.zvi-sf__card-links > .zvi-sf__morelink:only-of-type {
  background: var(--color-link);
  border: 1px solid var(--color-link);
  border-radius: var(--btn-border-radius);
  box-shadow: var(--fa-shadow-purple);
  color: #ffffff;
  min-height: 52px;
  padding: var(--btn-padding-y) 18px;
  text-decoration: none;
}

.zvi-sf__card-links > .zvi-sf__morelink:only-of-type:hover,
.zvi-sf__card-links > .zvi-sf__morelink:only-of-type:focus {
  background: var(--color-link-hover);
  border-color: var(--color-link-hover);
  color: #ffffff;
  text-decoration: none;
}


/* ---------------------------------------------------------
   13.7 עיגול מספר רובע בתפריט "רובעים בפריז"
   מחליף את .zvi-popular-grid-icon בפריטי הרבעים. אותה גאומטריה
   בדיוק (30x30, עיגול, מסגרת) כדי שהיישור בגריד יישאר זהה
   למודול "הכי פופולרי בפריז". tabular-nums מבטיח שרוחב
   הספרות זהה ולכן 1 ו-11 ממורכזים באותה צורה.
   --------------------------------------------------------- */
.zvi-popular-grid-num {
    width: 30px; height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(79,100,176,0.15);
    background: rgba(79,100,176,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--color-link, #4F64B0);
    font-variant-numeric: tabular-nums;
}

.zvi-popular-grid-item:hover .zvi-popular-grid-num {
    border-color: var(--color-link, #4F64B0);
}

/* פריטי הרבעים קצרים מפריטי המודול הפופולרי, ולכן ריווח מעט הדוק יותר */
.zvi-quarters-grid .zvi-popular-grid-item {
    padding: 7px 9px;
    gap: 7px;
}

/* עיגול קטן מעט בגריד הרבעים, קונה עוד פיקסלים לטקסט */
.zvi-quarters-grid .zvi-popular-grid-num {
    width: 26px; height: 26px;
    font-size: 0.75rem;
}



/* ---------------------------------------------------------
   13.8 מפת הרובעים של פריז (SVG) — /paris/map/
   המיקומים ב-viewBox מחושבים מקואורדינטות אמת עם תיקון
   לדחיסת קווי האורך בקו רוחב 48.86, ולכן היחסים גאוגרפיים.
   במפה מספרים בלבד: הרבעים 1-4 יושבים במרחק אמיתי של כ-83
   יחידות זה מזה, ותוויות שמות היו מתנגשות. השמות בגריד שמתחת.
   --------------------------------------------------------- */
.zvi-arr-map-wrap {
    margin: 0 0 18px;
    padding: 0;
}

.zvi-arr-map {
    display: block;
    width: 100%;
    height: auto;
    max-width: 820px;
    margin-inline: auto;
    background: #f7f9fc;
    border: 1px solid #eef0f7;
    border-radius: 14px;
    overflow: visible;
}

.zvi-arr-map__seine {
    fill: none;
    stroke: #bcd4ee;
    stroke-width: 26;
    stroke-linecap: round;
}

.zvi-arr-map__seine-label {
    fill: #7d9dc0;
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
}

.zvi-arr-map__cell {
    fill: #ffffff;
    stroke: #c3cbe4;
    stroke-width: 3;
    transition: fill 0.18s ease, stroke 0.18s ease;
}

.zvi-arr-map__num {
    fill: #2c3766;
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.zvi-arr-map__link .zvi-arr-map__cell {
    cursor: pointer;
}

.zvi-arr-map__link:hover .zvi-arr-map__cell,
.zvi-arr-map__link:focus .zvi-arr-map__cell {
    fill: var(--color-link, #4F64B0);
    stroke: var(--color-link, #4F64B0);
}

.zvi-arr-map__link:hover .zvi-arr-map__num,
.zvi-arr-map__link:focus .zvi-arr-map__num {
    fill: #ffffff;
}

.zvi-arr-map__link:focus-visible .zvi-arr-map__cell {
    stroke: #1a2550;
    stroke-width: 5;
}

.zvi-arr-map__caption {
    margin: 8px 0 0;
    font-family: var(--font-heading);
    font-size: 0.82rem;
    color: #6b7280;
    text-align: center;
}

/* במסכים צרים העיגולים מתרנדרים לכ-20 פיקסל, קטן מהמינימום
   המומלץ למגע. לכן מגדילים מעט את הספרה ומעבים את המסגרת
   כדי לשמור על קריאות, והגריד שמתחת הוא ממשק הלחיצה העיקרי. */
@media (max-width: 600px) {
    .zvi-arr-map {
        border-radius: 10px;
    }
    .zvi-arr-map__num {
        font-size: 46px;
    }
    .zvi-arr-map__cell {
        stroke-width: 4;
    }
    .zvi-arr-map__seine {
        stroke-width: 22;
    }
    .zvi-arr-map__seine-label {
        font-size: 30px;
    }
}

/* מכבדים העדפת תנועה מופחתת */
@media (prefers-reduced-motion: reduce) {
    .zvi-arr-map__cell {
        transition: none;
    }
}

/* =========================================
   42. CRITICAL HIDERS
   הכללים כאן מסתירים רכיבים שהעיצוב המלא שלהם נטען א-סינכרונית
   מ-zvi-below-fold.css. בלעדיהם הרכיבים מופיעים לרגע על המסך לפני
   שהעיצוב מגיע, כי הם קיימים ב-HTML או מוזרקים ב-JS מיד עם טעינת הדף.
   הספציפיות כאן נמוכה בכוונה, כדי שכללי הפצגה בקובץ הא-סינכרוני
   (למשל [aria-hidden="false"] או .is-open) ימשיכו לנצח אותם.
   נוסף 2026-08-12 בעקבות הבהוב שנצפה במגירת הנגישות.
   ========================================= */
.fa-a11y-drawer-overlay { visibility: hidden; opacity: 0; }
.fa-a11y-drawer-panel { transform: translateX(100%); }
.p13-hidden { display: none; }
.mobile-sticky-footer-bar { display: none; }
.sticky-separator { display: none; }
.sticky-modal-overlay { display: none; }
.zvi-sp-widget { opacity: 0; visibility: hidden; }
.cat-radio-label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }


/* =========================================
   43. DECISION TABLE, צבע הכותרות
   נוסף 2026-08-13: ל-.fr-decision-table th לא היה color,
   ולכן שורת הכותרות ירשה טקסט כהה על רקע כחול.
   ========================================= */
.fr-decision-table thead th,
.decision-table-box thead th {
    color: #ffffff;
}


/* =========================================================
   43. גלולות (pills) בשורה בדסקטופ, 13 באוגוסט 2026
   .zvi-cat-pill-list היה flex-direction: column, ויצר עמודה אנכית של
   כפתורים גם במסכים רוויחים. עכשיו שורה שנשברת לפי הרוחב,
   ובמובייל חוזר לעמודה. משפיע על כל המקומות שמשמשים ברכיב.
   ========================================================= */
/* מובייל: עמודה. דסקטופ: שורה שנשברת לפי הרוחב.
   ה-min-width מבטיח שהכלל הדסקטופי לא ייפול מול הכלל הבסיסי
   (flex-direction: column) שמופיע קודם בקובץ. עודכן 13 באוגוסט 2026. */
.zvi-cat-pill-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
@media (min-width: 601px) {
    .zvi-cat-pill-list {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }
}


/* =========================================================
   44. כפתור מלא רוחב, 13 באוגוסט 2026
   ל-.zvi-btn-full-width היה display:flex אבל הילד לא נמתח, ולכן הכפתור
   נשאר ברוחב הטבעי שלו וצמוד לימין. גובר גם על מגבלת
   max-width: 320px של .zvi-ticket-btn, אבל רק בתוך העוטף הזה.
   ========================================================= */
.zvi-btn-full-width > a,
.zvi-btn-full-width > button {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
}


/* =====================================================================
   אריח ניווט עם כפתור  \u2014  .zvi-sf-tiles--btn
   וריאנט של אריח הניווט: שורת ההזמנה לקריאה מוצגת ככפתור מסגרת
   ולא כקישור מקווקו. לשימוש כשמוצגים כמה אריחים בשורה אחת.
   ================================================================== */

.zvi-sf-tiles--btn .zvi-sf__tile {
	display: flex;
	flex-direction: column;
}

.zvi-sf-tiles--btn .zvi-sf__tile-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.zvi-sf-tiles--btn .zvi-sf__tile-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0;
	padding: 10px 24px;
	min-height: 44px;
	background-color: var(--card-bg-color);
	border: 2px solid var(--color-link);
	border-radius: 50px;
	font-family: var(--font-heading);
	font-weight: 600;
	text-decoration: none;
	transition: var(--btn-transition);
}

.zvi-sf-tiles--btn .zvi-sf__tile:hover .zvi-sf__tile-cta,
.zvi-sf-tiles--btn .zvi-sf__tile:focus-visible .zvi-sf__tile-cta {
	background-color: var(--color-link);
	color: #ffffff;
}