/* pages/landing/computer-3d/css/urgency.css
   ════════════════════════════════════════════════════════════════════
   אלמנטי social proof (velocity toast).

   ההיסטוריה (26/5/2026 ואחר כך), היו פה הרבה אלמנטי scarcity (timer,
   spots counter, savings tags, anchor inline). הם הוסרו אחד אחד לפי
   החלטות עיצוביות של עומר,
   - טיימר, "מעפן, אפשר למדוד אותי"
   - spots counter עם מספר יורד, מחליף ב-pill פשוט "ל-50 הראשונים"
   - savings tags כפולים, "מספיק תג אחד ירוק"
   - guarantee row, "פותח לבעיות, נוסיף ב-checkout"
   נשאר רק velocity toast, התראות "X רכש לפני Y דקות".
   ════════════════════════════════════════════════════════════════════ */

/* .price-anchor-inline, .price-savings, .price-discount, .price-savings-amount
   הוסרו 27/5/2026, היו של כרטיס המחיר הישן שעוצב מחדש (.price-card-v2
   ב-pricing-faq.css). */

/* ─── VELOCITY TOAST NOTIFICATIONS (rebuild 27/5/2026) ────
   נכתב מחדש מאפס אחרי שהגרסאות הקודמות הציגו את ה-span "לפני X דקות"
   באופן מוזר (יוצא מהקופסה, צבע אורנג', עיצוב לא יציב).
   הגישה החדשה,
   - block layout פשוט (ללא flex על container הראשי)
   - icon כ-inline-block, צף בקצה
   - text container ב-text-align: center
   - גודלים קטנים, רווחים סבירים
   - z-index 95 לבטח מעל הכל. */
.velocity-toast {
  position: fixed;
  bottom: 100px;
  inset-inline-start: 16px;
  z-index: 95;
  width: 260px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 10px 14px;
  background: white;
  border: 2px solid var(--orange);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22), 0 4px 10px rgba(232,133,74,0.18);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.velocity-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* האייקון, עיגול קטן ממורכז מעל הטקסט */
.velocity-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange-light);
  margin-bottom: 4px;
  color: var(--orange-deep);
}
.velocity-toast-icon .icon {
  width: 16px;
  height: 16px;
}

/* container של הטקסט, block + center */
.velocity-toast-text {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.25;
}
.velocity-toast-text strong,
.velocity-toast-text .velocity-toast-title {
  display: block;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.85rem;
  line-height: 1.25;
  /* unicode-bidi: isolate מבטיח שטקסט עברי + מספרים לא יפוצל ע"י
     אלגוריתם ה-bidi של הדפדפן (המלצת GPT). */
  unicode-bidi: isolate;
}
.velocity-toast-text span,
.velocity-toast-text .velocity-toast-time {
  display: block;
  font-size: 0.7rem;
  color: var(--text-mid);
  margin-top: 2px;
  line-height: 1.2;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* .cta-primary-top, .cta-primary-main, .price-spots-row, .price-anchor-inline
   הוסרו 27/5/2026, היו של עיצוב ישן של pricing+CTA. */

/* ─── MOBILE ADJUSTMENTS ────────────────────────────────── */
@media (max-width: 760px) {
  .velocity-toast {
    bottom: 100px;
    inset-inline-start: 12px;
    /* רוחב מצומצם יותר במובייל, לא מילוי מסך, יותר אסתטי */
    width: 240px;
    max-width: calc(100vw - 24px);
    padding: 10px 12px;
  }
  .velocity-toast-text strong {
    font-size: 0.82rem;
  }
  .velocity-toast-text span {
    font-size: 0.68rem;
  }
}

/* כשה-sticky CTA מופיע, גם ה-WhatsApp וגם ה-velocity toast מתרוממים,
   והם צריכים להישאר במרחק אחד מהשני. הסדר הוא, מהמטה למעלה,
   1. sticky CTA bar (גובה ~60px בתחתית)
   2. WhatsApp float (24px מעל הבר = bottom 96px, גודל 56px)
   3. Velocity toast (מעל ה-WhatsApp, bottom 168px = 96+56+16)
   במובייל קטן (480px-), WhatsApp 52x52 + bottom 96 = 148, רווח 16 = 164. */
body.has-sticky-cta .velocity-toast {
  bottom: 168px;
}
@media (max-width: 480px) {
  body.has-sticky-cta .velocity-toast {
    bottom: 164px;
  }
}