/* ═══════════════════════════════════════════════════════════════════════════════
   CATALOG — קטלוג המוצרים באתר זימון התורים.
   נטען אחרי app.css ומשתמש באותם משתני-עיצוב. RTL בירושה מ-<html dir="rtl">.
   הצבע המוביל (--lead) נקבע ב-app.js לפי הגדרת העסק.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── סקשן מסך הבית ─────────────────────────────────────────────────────────── */
.cat-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cat-strip::-webkit-scrollbar { display: none; }
.cat-strip { scrollbar-width: none; }
.cat-strip .cat-card { flex: 0 0 44%; scroll-snap-align: start; }

.cat-more {
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 12px;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--green, #64BB73);
  cursor: pointer;
}

/* ── כרטיס מוצר ────────────────────────────────────────────────────────────── */
.cat-card {
  display: flex;
  flex-direction: column;
  padding: 0 0 10px;
  border: 1px solid var(--line, #edf0f3);
  border-radius: 16px;
  background: var(--surface, #fff);
  overflow: hidden;
  text-align: start;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
@media (hover: hover) {
  .cat-card:hover {
    border-color: var(--border, #e6e6e6);
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
    transform: translateY(-2px);
  }
}
.cat-card:active { transform: scale(0.985); }

.cat-img {
  position: relative; /* עוגן לתג המבצע */
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--bg, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* מוצר בלי תמונה הוא המצב הרגיל: רוב הקטלוגים נבנים בקופה בלי תמונות. */
.cat-img.ph::after {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--border, #e0e0e0);
}

/* ── כרטיס מוצר: היררכיה ─────────────────────────────────────────────────────
   קודם השם והמחיר היו שניהם מודגשים, ולכן שום דבר לא בלט והכרטיס נקרא כגוש
   אחד. עכשיו: שם במשקל רגיל ובצבע רך, מחיר הוא ההדגשה היחידה, ומבצע מקבל תג. */
.cat-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 2px;
}
.cat-name {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text, #1f2937);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.cat-price { display: flex; align-items: baseline; gap: 6px; font-size: 15px; }
.cat-now { font-weight: 700; letter-spacing: -0.2px; }
.cat-now.sale { color: var(--green, #64BB73); }
.cat-price s { font-size: 13px; font-weight: 400; opacity: 0.45; }

/* תג מבצע — פינה עליונה של התמונה, הסימון היחיד שנקרא במבט חטוף. */
.cat-tag {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--green, #64BB73);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

/* תג "אזל מהמלאי" — אפור ולא אדום. אזילה אינה שגיאה של הלקוח, והיא חוזרת.
   אדום שמור להודעות כשל בזרימת התשלום. */
.cat-tag--oos {
  background: var(--gray-600, #52525B);
}

/* כרטיס שאזל — עמום אך קריא ולחיץ: הלקוח עדיין רשאי להיכנס ולראות פרטים.
   opacity על התמונה בלבד, לא על הכרטיס כולו, כדי שהשם והמחיר יישארו בניגודיות
   תקנית (IS 5568 AA) — עמעום גורף היה מוריד טקסט אפור מתחת ל-4.5:1. */
.cat-card--oos .cat-img > img {
  opacity: 0.45;
  filter: grayscale(0.7);
}
.cat-card--oos .cat-now {
  color: var(--gray-600, #52525B);
}

/* ── מסך קטלוג מלא ─────────────────────────────────────────────────────────── */
.cat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

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

   sticky ולא fixed: המסך נשאר בזרימת המסמך, ולכן אין צורך לחשב padding
   מפצה ואין קפיצה כשהמקלדת נפתחת במובייל. */
/* gap:0 ו-padding-bottom:0 דורסים את .screen: המרווחים כאן מפורשים, אחרת
   הכותרת הדביקה והסרגל הצף יורשים 16px/40px שמנתקים אותם מהקצוות. */
.cat-screen {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100dvh;
  padding-bottom: 0;
}

/* המרווחים השליליים תואמים ל-padding האופקי של .screen (18px), כדי שהרקע
   יגיע לקצה ותוכן שגולל מתחת לא "יציץ" בצדדים. */
.cat-top--fixed {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: -22px -18px 0;
  padding: 14px 18px 10px;
  background: var(--surface, #fff);
}
/* קו-שיער עדין שמפריד מהתוכן שגולל מתחתיו. */
.cat-top--fixed::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: var(--line, #edf0f3);
}

.cat-body-scroll {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
}

/* סרגל תחתון צף. הרקע נמשך מעבר לקצוות כדי שתוכן שגולל מתחתיו לא "יציץ". */
.cat-footbar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin: 16px -18px 0;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--surface, #fff);
  border-block-start: 1px solid var(--line, #edf0f3);
}
.cat-footbar .cta { margin: 0; }

/* הודעת שגיאה בתוך הסרגל הצף — מעל הכפתור, מחוץ לגלילה.
   ⚠️ ל-.error-text יש min-height קבוע גם כשהיא מוסתרת; בתוך הסרגל זה היה
   מרווח ריק תמידי מעל הכפתור. כאן היא תופסת מקום רק כשיש מה לומר. */
.cat-footbar .error-text {
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  transition: height .18s ease, opacity .2s, transform .2s;
}
.cat-footbar .error-text.show {
  height: auto;
  min-height: 18px;
  margin-bottom: 8px;
}
.cat-title { font-size: 20px; font-weight: 800; margin: 4px 0 12px; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 560px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── כפתור העגלה ───────────────────────────────────────────────────────────── */
.cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 999px;
  background: var(--surface, #fff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cart-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--green, #64BB73);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

/* ── מסך מוצר ──────────────────────────────────────────────────────────────── */
.p-gallery {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-radius: 14px;
  margin-bottom: 12px;
}
.p-gallery img {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 14px;
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.p-gallery.ph { height: 180px; background: var(--bg, #f5f5f5); }
.p-gallery { scroll-snap-type: x mandatory; scrollbar-width: none; }
.p-gallery::-webkit-scrollbar { display: none; }

/* ── חיווי ריבוי-תמונות ───────────────────────────────────────────────────────
   בלי זה אין שום רמז שיש עוד תמונה: הגלריה גוללת אופקית, והתמונה השנייה
   מתגלה רק למי שניחש לגרור. */
.p-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: -4px 0 14px;
}
.p-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border, #d8dde3);
  transition: width .2s ease, background-color .2s ease;
}
.p-dot.on { width: 18px; background: var(--green, #64BB73); }

.p-name { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.3px; }
.p-price { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.p-desc { font-size: 14px; line-height: 1.5; opacity: 0.85; margin-bottom: 14px; white-space: pre-wrap; }

.p-var { margin-bottom: 14px; }
.p-var-label { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.p-var-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.p-var-opt {
  padding: 8px 14px;
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 999px;
  background: var(--surface, #fff);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.p-var-opt.sel {
  border-color: var(--green, #64BB73);
  box-shadow: inset 0 0 0 1px var(--green, #64BB73);
  font-weight: 700;
}

/* ── אפשרות שאזלה (מלאי סבב ב' §שלב 8) ─────────────────────────────────────
   הקו החוצה נושא את המשמעות בעצמו — "M" חצוי נקרא כ"אין" גם בעיוורון-צבעים
   ובמסך בהיר בשמש. העמעום הוא תוספת, לא הנשא. הכפתור נשאר במסמך וממוקד-מקלדת,
   עם title שמסביר למה, במקום להיעלם בשקט מהניווט. */
.p-var-opt--oos {
  text-decoration: line-through;
  opacity: .45;
  cursor: not-allowed;
  border-style: dashed;
}

/* ── CM.1 — "בחרו בדיוק 6", אותו טעם כמה פעמים, "אזל", טקסט אישי ─────────── */
.p-var-count { font-size: 12px; opacity: .8; margin: -2px 0 8px; transition: color .2s ease; }
.p-var-count.done { color: var(--green, #2f8f3e); font-weight: 700; opacity: 1; }
.p-var-steps { display: flex; flex-direction: column; gap: 6px; }
.p-var-step {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 14px;
  font-size: 13px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.p-var-step.sel { border-color: var(--green, #64BB73); box-shadow: inset 0 0 0 1px var(--green, #64BB73); font-weight: 700; }
.p-var-step .qty-ctl button { width: 34px; height: 34px; }
.p-var-step .qty-ctl button:disabled { opacity: .35; cursor: not-allowed; }
.p-var-step--soldout, .p-var-opt--soldout { opacity: .55; cursor: not-allowed; }
.p-var-opt--full { opacity: .5; cursor: not-allowed; }
.p-var-text { position: relative; }
.p-var-text input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px 10px 52px;
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 12px;
  font: inherit; font-size: 14px;
  background: var(--surface, #fff);
}
.p-var-text input:focus { outline: none; border-color: var(--green, #64BB73); }
.p-var-text small { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 11px; opacity: .7; }

.p-qty { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; }
.qty-ctl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border, #e6e6e6);
  border-radius: 999px;
  overflow: hidden;
}
.qty-ctl button {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.qty-ctl span { min-width: 28px; text-align: center; font-weight: 700; }

/* ── עגלה ──────────────────────────────────────────────────────────────────── */
.cart-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #eee);
}
.cart-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-info b { font-size: 14px; }
.cart-info small { font-size: 12px; opacity: 0.6; }
.cart-line .cart-price { font-weight: 700; font-size: 14px; white-space: nowrap; }
/* שורה שמוצרה נעלם — מוצגת מעומעמת ואינה נספרת בסכום. */
.cart-line.gone .cart-info b { opacity: 0.55; }

.cart-warn {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff4e5;
  color: #8a5a00;
  font-size: 13px;
}
.cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 8px;
  font-size: 17px;
}
.cart-total b { font-weight: 800; }
/* ── "ההזמנות שלי" ─────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   כרטיס הזמנה
   ═══════════════════════════════════════════════════════════════════════════
   שלוש שכבות ברורות: כותרת (מה זו ההזמנה ומה מצבה) · שורות המוצרים · סיכום
   (איך שולם וכמה). קודם הכרטיס הציג "שולם" וסכום בלבד — בלי מה הוזמן ובלי
   באיזה אמצעי — וזה לא נראה כמו רשומה של הזמנה. */
.ord {
  border: 1px solid var(--line, #edf0f3);
  border-radius: 16px;
  background: var(--surface, #fff);
  padding: 0;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.ord-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
}
.ord-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ord-id b { font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
.ord-meta {
  font-size: 12.5px;
  color: var(--fg3, #98a2b3);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ord-badge {
  flex: 0 0 auto;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.ord-badge.is-ok { background: #e7f5ec; color: #1e7e34; }
.ord-badge.is-wait { background: #fff4e2; color: #a8620a; }
.ord-badge.is-cancel { background: #fdeceb; color: #b42318; }

/* שורות המוצרים — רצועה בגוון רקע, כדי שתיקרא כתוכן ההזמנה ולא כעוד טקסט. */
.ord-lines {
  display: flex;
  flex-direction: column;
  border-block: 1px solid var(--line, #edf0f3);
  background: #fafbfc;
}
.ord-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
}
.ord-line + .ord-line { border-block-start: 1px solid var(--line, #edf0f3); }

/* מונה כמות בתיבה קטנה — עמודה יציבה שמאפשרת לסרוק את הרשימה במבט אחד. */
.ord-qty {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 2px 6px;
  border-radius: 7px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6eaee);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg2, #667085);
  text-align: center;
  direction: ltr;
}

.ord-line-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ord-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ord-vars { font-size: 12px; color: var(--fg3, #98a2b3); line-height: 1.35; }

.ord-line-price {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13.5px;
}
.ord-line-price s { font-size: 12px; opacity: .45; }
.ord-line-now { font-weight: 600; }

.ord-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 14px;
}
.ord-pay {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--fg2, #667085);
  min-width: 0;
}
.ord-pay.is-paid { color: var(--green, #64BB73); font-weight: 600; }
.ord-pay-ic { width: 16px; height: 16px; flex: 0 0 auto; }

.ord-total { display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; }
.ord-total b { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; }
.ord-save {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green, #64BB73);
  background: var(--green-50, #f0f9f2);
  padding: 2px 8px;
  border-radius: 999px;
}

.ord-none { padding: 14px 16px; font-size: 13px; color: var(--fg3, #98a2b3); }

/* ── צ'קאאוט ───────────────────────────────────────────────────────────────── */
.ko-methods { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

/* Z-Credit — עמוד תשלום מתארח. גובה קבוע כדי שהמסגרת לא "תקפוץ" בזמן הטעינה. */
.z-frame {
  width: 100%;
  height: 560px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border, #e6e6e6);
  background: var(--surface, #fff);
}
.z-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.cart-pickup {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg, #f5f5f5);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETONS — טעינת הקטלוג
   ═══════════════════════════════════════════════════════════════════════════
   🔴 קודם הרצועה בעמוד הבית הייתה **ריקה** בזמן הטעינה, והרשת המלאה הציגה
   ספינר בודד. שניהם נקראו כ"אין מוצרים" ולא כ"עוד רגע", והרשת גם קפצה כשהתוכן
   נחת. השלד תופס בדיוק את מקום הכרטיס, ולכן הפריסה יציבה.
   מנצל את .skel המשותף (app.css) — אותה אנימציית-הבהוב של שאר האתר. */
.cat-card--skeleton {
  pointer-events: none;
  border-color: var(--line, #edf0f3);
}
.cat-card--skeleton .cc-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
}
.cat-card--skeleton .cc-line {
  height: 11px;
  border-radius: 6px;
  margin: 0 10px;
}
.cat-card--skeleton .cc-line--short { width: 42%; }
@media (prefers-reduced-motion: reduce) {
  .cat-card--skeleton .skel::after { animation: none; }
}

/* ── שלד מסך-מוצר ─────────────────────────────────────────────────────────────
   כניסה ישירה ל-URL של מוצר (או רענון) טוענת את הקטלוג מחדש. בלי השלד המסך
   לבן לגמרי עד שהרשת חוזרת — וזה נקרא כתקלה, לא כטעינה. */
.p-gal-sk {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  margin-bottom: 16px;
}
.p-line-sk { height: 18px; border-radius: 8px; margin-bottom: 10px; }
.p-line-sk--short { width: 45%; }
.p-block-sk { height: 66px; border-radius: 12px; margin: 16px 0; }
.p-cta-sk { height: 52px; border-radius: 14px; margin-top: 20px; }

/* ── שלד כרטיסי-הזמנה ───────────────────────────────────────────────────────── */
.ord--skeleton {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.ord--skeleton .o-line { height: 12px; border-radius: 6px; }
.ord--skeleton .o-line--top { width: 55%; height: 15px; }
.ord--skeleton .o-line--short { width: 35%; }

@media (prefers-reduced-motion: reduce) {
  .p-gal-sk::after, .p-line-sk::after, .p-block-sk::after, .p-cta-sk::after,
  .ord--skeleton .skel::after { animation: none; }
}


/* ── מסך סיום ההזמנה: כפתור לכל אמצעי ──────────────────────────────────────────
   🔴 ב-Z-Credit יש כפתור נפרד לכל אמצעי, ולא כפתור אחד שפותח עמוד עם כל
   האמצעים בתוכו. הסיבה אינה עיצובית: Apple Pay **אינו עובד** ב-iframe
   חוצה-מקורות, ולכן הוא חייב לצאת ברידיירקט ברמה העליונה — וזה אפשרי רק כשהוא
   כפתור משלנו. אותה תבנית בדיוק כמו ב-/p/ וב-/b/. */
.ko-methods { display: flex; flex-direction: column; gap: 10px; }

/* כל אמצעי התשלום נראים אותו דבר — כפתור לבן עם אייקון האמצעי. קודם האשראי
   היה ירוק והשאר לבנים, וזה נקרא כ"זו הדרך הנכונה והשאר חריגים". */
.ko-method {
  position: relative;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: var(--fg1, #1f2937);
  border: 1px solid var(--field-border, #d0d0d0);
  border-radius: var(--radius-btn, 14px);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow .16s ease, border-color .16s ease, transform .1s ease;
}
@media (hover: hover) {
  .ko-method:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.16);
    border-color: #cdd3da;
  }
}
.ko-method:active:not(:disabled) { transform: scale(.985); }
.ko-method:disabled { opacity: .55; cursor: default; }

.ko-mic {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 5px; /* מעגל פינות של אייקון מרובע; PNG שקוף לא מושפע */
  flex: 0 0 auto;
  color: var(--fg1, #1f2937);
}

/* תיבת-טקסט ברוחב קבוע: קבוצת [אייקון + טקסט] באותו רוחב בכל הכפתורים ולכן
   ממורכזת יחד, והאייקונים מסתדרים בעמודה אחת. הטקסט מיושר להתחלה (ימין ב-RTL)
   כך שההתחלות מתיישרות ורק הסופים נבדלים. זהה ל-/p/ ול-/b/. */
.ko-mtext { width: 132px; text-align: start; white-space: nowrap; }

/* הספינר על רקע לבן חייב להיות כהה, אחרת הוא בלתי-נראה בזמן הטעינה. */
.ko-method .cta-spin, .ko-method .cta-check { display: none; }
.ko-method.busy .cta-label { opacity: 0; }
.ko-method.busy .cta-spin { display: inline-flex; position: absolute; }
.ko-method .spin {
  border-color: rgba(0, 0, 0, .18);
  border-top-color: #1f2937;
}

/* 🔴 הפס האפור בקצה "תשלום בעסק בעת האיסוף": כלל ההסתרה של הספינר היה מוגדר
   על `.cta` בלבד (app.css), והכפתור הזה הוא `.sbtn` כשיש גם אשראי — כלומר
   ה-`.cta-spin` נותר גלוי בתוך הכפתור ונראה כפס. */
.sbtn .cta-spin, .sbtn .cta-check { display: none; }
.sbtn.busy .cta-label { opacity: 0; }
.sbtn.busy .cta-spin { display: inline-flex; position: absolute; }


/* אזהרת מלאי בשורת העגלה (מלאי סבב ב'). אדום ולא אפור: זו לא הערה, זו הסיבה
   שהכמות לא תעבור בקופה. */
.cart-line-warn {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--danger, #d33);
}