/* באנר הורדת האפליקציה — צף בתחתית, בסגנון שרוני ביקש.
 *
 * ⚠️ **`inset-inline-start: 92px` ולא `0`.** כפתור הנגישות יושב
 * bottom-left בכל האתרים (~56px + שוליים), ובאנר שנכנס לתחום שלו גונב
 * את הלחיצה. זה נמדד בפועל ב-nativ-aharon ב-16.8.2026 ועלה שני סבבי
 * תיקון — "הכפתור לא מגיב" בזמן שהוא מגיב מצוין, פשוט מישהו אחר תפס.
 *
 * ⚠️ `env(safe-area-inset-bottom)` — באייפון עם סרגל תחתון הבאנר היה
 * יושב מתחתיו וחצי ממנו לא נגיש.
 */
.appb {
  position: fixed;
  inset-block-end: 0;
  /* 🛑🛑 **`left` פיזי ולא `inset-inline-start`.** ווידג'ט הנגישות
     מוגדר `position: 'bottom-left'` — זו פינה **פיזית**, והיא נשארת
     שמאלה גם באתר RTL. `inset-inline-start` ב-RTL מצביע **ימינה**,
     כלומר הרווח נשמר בדיוק בצד ההפוך והבאנר כן כיסה את הכפתור.
     נמדד ב-Playwright: x=10 במקום x≥76. */
  right: 0;
  left: 92px;
  z-index: 90;
  padding: 0 10px calc(10px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.appb[hidden] { display: none !important; }

.appb-in {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #DDD0B8);
  box-shadow: 0 8px 28px rgba(31, 26, 18, .18);
}

.appb-icon {
  flex: none;
  width: 48px; height: 48px;
  border-radius: 12px;
  object-fit: cover;
}

/* ⚠️ `min-width: 0` על הילד הגמיש — בלעדיו טקסט ארוך מרחיב את
   הפלקסבוקס במקום להיחתך, והכפתור נדחף מחוץ למסך. */
.appb-txt { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.appb-txt strong { display: block; font-size: 14.5px; color: var(--text, #1E1209); }
.appb-txt span {
  display: block; font-size: 12.5px; color: var(--text-muted, #6B5B4E);
  /* שתי שורות לכל היותר — כותרת-משנה ארוכה לא תדחוף את הבאנר לגובה מסך. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.appb-cta {
  flex: none;
  /* ⚠️ 44px — יעד מגע. כפתור נמוך מזה בתוך באנר צף נלחץ בטעות. */
  min-height: 44px;
  display: inline-flex; align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--primary, #8B2635);
  color: #fff;
  font-size: 14.5px; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* ⚠️ ה-× יושב **מחוץ** לזרימה, בפינה — בתוך השורה הוא היה גונב רוחב
   מהטקסט במסכים צרים. 40px יעד מגע גם כשהוא נראה קטן. */
.appb-x {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-start: -8px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #DDD0B8);
  border-radius: 50%;
  background: var(--surface, #fff);
  color: var(--text-muted, #6B5B4E);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31, 26, 18, .12);
}

/* ⚠️ מוסתר בהדפסה — באנר צף על נייר הוא כתם. */
@media print { .appb { display: none !important; } }

/* ⚠️ מעל 720px הוא לא מוצג בכלל: ה-JS מסנן לאנדרואיד, אבל טאבלט
   אנדרואיד רחב עדיין מגיע לכאן, ובאנר ברוחב מסך מלא נראה שבור. */
@media (min-width: 720px) {
  /* ⚠️ גם כאן פיזי — הרווח משמאל כבר לא נחוץ ברוחב הזה. */
  .appb { left: auto; max-width: 420px; }
}