/*
 * Design Deal - דף מוצר, החלק שמתחת לקפל.
 *
 * 360 · גלריית לקוחות · רילסים · השוואת גימורים · טבלת השוואה · איך זה עובד
 * טיפים · אמון · שאלות נפוצות · דגמים נוספים · טופס · הרכיבים הצפים.
 *
 * הכללים שמחייבים כאן: אין hex קשיח (הכל var(--dd-*)), אין left/right
 * (רק תכונות לוגיות, כי האתר RTL), וכל תנועה מתבטלת ב-prefers-reduced-motion.
 */

/* ══ 360 ═══════════════════════════════════════════════════════════════ */

.dd-spin__frame {
  max-width: 720px;
  margin-inline: auto;
}

.dd-spin__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--dd-r-lg);
  overflow: hidden;
  background: var(--dd-stage);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none; /* הגרירה מסובבת את המודל, לא גוללת את הדף. */
}

/* השלד תופס את הגובה הסופי כבר בטעינה, כדי שהנגן לא יקפיץ את הדף. */
.dd-spin__skeleton {
  position: absolute;
  inset: 0;
  background: var(--dd-stage);
  overflow: hidden;
}

.dd-spin__shimmer {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 60%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: dd-shimmer 1.6s var(--dd-ease) infinite;
}

@keyframes dd-shimmer {
  to { inset-inline-start: 110%; }
}

.dd-spin__loading {
  position: relative;
  z-index: 1;
}

/* ברגע שהמנוע מוכן הוא מסיר את data-dd-360-loading; עד אז השלד נשאר. */
.dd-spin__stage.is-ready .dd-spin__skeleton,
.dd-spin__stage.is-ready .dd-spin__loading { display: none; }

/*
 * שחרור המסגרת ברגע שהנגן האמיתי נכנס.
 *
 * הבמה שנבנית ב-PHP שומרת מקום ביחס 4:3 כדי שהדף לא יקפוץ בזמן
 * הטעינה - תפקיד נכון, אבל הוא נגמר ברגע שהנגן מוטמע. הנגן גבוה
 * מהריבוע השמור, כי מתחת לקנבס שלו יש שורת בקרות ורצועת דוגמיות.
 *
 * נמדד: הנגן 383px בתוך במה של 269px ב-390 רוחב, ו-602 בתוך 540
 * בדסקטופ. `align-items: center` פיזר את החריגה לשני הכיוונים, ולכן
 * גם הכותרת למעלה וגם הדוגמיות למטה נחתכו - בדיוק מה שדווח.
 *
 * `overflow` חייב להשתחרר יחד עם `aspect-ratio`: הסרת היחס לבדה
 * הייתה מותירה את החיתוך אם התוכן יגדל שוב בעתיד.
 */
.dd-spin__stage.is-ready:has(.dd-spin--inline) {
  aspect-ratio: auto;
  overflow: visible;
  display: block;
  background: none;
  border-radius: 0;
}

.dd-spin__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--dd-s-2);
  margin-block-start: var(--dd-s-4);
  color: var(--dd-muted);
}

.dd-spin__hint-note::before {
  content: "·";
  margin-inline-end: var(--dd-s-2);
}

/* ══ גלריית לקוחות ═════════════════════════════════════════════════════ */

.dd-customers__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/*
 * לדגם קטלוג יש צילום התקנה אחד לכל היותר. auto-fit היה מותח אותו לכל רוחב
 * המכל - תמונת וואטסאפ ברוחב 1200px. auto-fill שומר את רוחב העמודה.
 */
.dd-customers__grid--catalog {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.dd-customers__empty {
  display: grid;
  justify-items: center;
  gap: var(--dd-s-2);
  padding: 36px 20px;
  text-align: center;
  border: 1.5px dashed var(--dd-border);
  border-radius: var(--dd-r-lg);
}

.dd-customers__emptyTitle {
  margin: 0;
  font-weight: var(--dd-fw-bold);
  color: var(--dd-ink);
}

.dd-customers__card {
  display: block;
  inline-size: 100%;
  text-align: start;
  padding: 0;
  cursor: zoom-in;
}

.dd-customers__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--dd-stage);
  overflow: hidden;
}

.dd-customers__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dd-t-slow) var(--dd-ease);
}

.dd-customers__card:hover .dd-customers__media img { transform: scale(1.04); }

.dd-customers__caption {
  display: block;
  padding: var(--dd-s-4) var(--dd-s-5);
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-medium);
  color: var(--dd-ink-soft);
}

/* ── לייטבוקס ───────────────────────────────────────────────────────── */

.dd-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--dd-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dd-s-4);
}

.dd-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .82);
  border: 0;
}

.dd-lightbox__panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dd-s-2);
  max-inline-size: min(1000px, 100%);
  max-block-size: 100%;
}

.dd-lightbox__figure {
  flex: 1 1 auto;
  min-inline-size: 0;
  text-align: center;
}

.dd-lightbox__figure img {
  max-block-size: 78vh;
  inline-size: auto;
  margin-inline: auto;
  border-radius: var(--dd-r-md);
  box-shadow: var(--dd-shadow-lg);
}

.dd-lightbox__caption {
  margin-block-start: var(--dd-s-4);
  color: var(--dd-n-200);
  font-size: var(--dd-fs-sm);
}

.dd-lightbox__btn {
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--dd-white);
  color: var(--dd-ink);
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--dd-shadow-float);
}

.dd-lightbox__btn--close {
  position: absolute;
  inset-block-start: calc(var(--dd-s-4) * -1);
  inset-inline-end: 0;
  z-index: 2;
}

@media (max-width: 560px) {
  /* בנייד החצים יורדים מתחת לתמונה - 44px ליד הקצה חוטפים מהאגודל. */
  .dd-lightbox__panel { flex-wrap: wrap; justify-content: center; }
  .dd-lightbox__figure { flex-basis: 100%; order: -1; }
  .dd-lightbox__figure img { max-block-size: 62vh; }
}

/* ══ רילסים ════════════════════════════════════════════════════════════ */

.dd-reels__wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dd-s-3);
}

.dd-reels__strip {
  display: flex;
  gap: var(--dd-s-4);
  padding-block-end: var(--dd-s-3);
  flex: 1 1 auto;
  min-inline-size: 0;
  /* ממורכז (05/10). safe: כשהרצועה גולשת, מרכוז רגיל היה דוחף את הכרטיס
     הראשון אל מחוץ לתחילת אזור הגלילה - אותו לקח של הטאבים מ-11/08. */
  justify-content: safe center;
}

.dd-reels__card {
  position: relative;
  flex: 0 0 auto;
  inline-size: 210px;
  aspect-ratio: 9 / 16;
  border-radius: var(--dd-r-lg);
  overflow: hidden;
  background: var(--dd-cream-section);
  border: var(--dd-border);
}

.dd-reels__poster {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.dd-reels__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0) 50%, rgba(17, 17, 17, .62) 100%);
}

.dd-reels__soon {
  position: absolute;
  inset-block-start: var(--dd-s-3);
  inset-inline-start: var(--dd-s-3);
}

/* ── כרטיס עם רילס אמיתי מאחוריו ─────────────────────────────────── */

.dd-reels__open {
  position: absolute;
  inset: 0;
  display: block;
}

/* מרכוז ב-inset+margin ולא ב-translate: אינו תלוי בכיוון הכתיבה. */
.dd-reels__play {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 54px;
  block-size: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .92);
  color: var(--dd-ink);
  transition: transform var(--dd-t-fast), background var(--dd-t-fast);
}

/*
 * המשולש מצביע ימינה גם ב-RTL. סמל הנגינה אינו נקרא ככיוון קריאה אלא
 * כסמל בינלאומי, וכל נגן - כולל זה של פייסבוק שנפתח בלחיצה - משתמש בו
 * ככה. משולש שמאלה נקרא "הקודם" וסותר את מה שקורה אחרי הלחיצה.
 */
.dd-reels__play svg {
  margin-inline-end: 2px;
}

.dd-reels__card--live:hover .dd-reels__play,
.dd-reels__open:focus-visible .dd-reels__play {
  transform: scale(1.08);
  background: var(--dd-white);
}

.dd-reels__len {
  position: absolute;
  inset-block-start: var(--dd-s-3);
  inset-inline-start: var(--dd-s-3);
  font-variant-numeric: tabular-nums;
}

.dd-reels__caption {
  position: absolute;
  inset-block-end: var(--dd-s-4);
  inset-inline: var(--dd-s-4);
  color: var(--dd-n-100);
  font-size: var(--dd-fs-xs);
  font-weight: var(--dd-fw-bold);
  line-height: 1.35;
}

/*
 * הערה למי שמריץ contrast-check ורואה כאן כשל 1.08:1:
 *
 * זהו false positive מוכר ולא תקלה. הכיתוב לבן ויושב מעל .dd-reels__scrim
 * שמעליו - גרדיאנט שמגיע ל-62% שחור בתחתית הכרטיס. הכלי קורא
 * background-color בלבד ואינו רואה לא תמונה ולא גרדיאנט, ולכן הוא
 * משווה את הלבן לרקע השמנת של הסקשן. נבדק ויזואלית: קריא.
 */

.dd-reels__nav {
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--dd-white);
  border: 1px solid var(--dd-hairline);
  box-shadow: var(--dd-shadow-float);
  font-size: 1.25rem;
  line-height: 1;
  display: none;
}

/* הכפתורים מופיעים רק כשיש לאן לגלול, ורק במסכים עם עכבר. */
@media (hover: hover) and (min-width: 768px) {
  .dd-reels__wrap.is-scrollable .dd-reels__nav { display: flex; align-items: center; justify-content: center; }
}

/* ══ השוואת גימורים ════════════════════════════════════════════════════ */

.dd-ba {
  position: relative;
  max-inline-size: 620px;
  margin-inline: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--dd-r-lg);
  overflow: hidden;
  background: var(--dd-stage);
  /* בסיס ל-100cqi: כך התמונה הפנימית שומרת על רוחב מלא בזמן החיתוך. */
  container-type: inline-size;
}

.dd-ba__img {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 100cqi;
  max-inline-size: none;
  block-size: 100%;
  object-fit: cover;
}

/* השכבה העליונה נחתכת לפי --dd-ba-pos, שנקבע ב-JS מערך ה-range. */
/* בורר גוון בכל צד של ההשוואה (05/10). הסדר בשורה תואם לצדדים: ימין, שמאל. */
.dd-ba-pick {
  display: flex;
  justify-content: space-between;
  gap: var(--dd-s-4);
  max-inline-size: 620px; /* כרוחב הסליידר, כדי שכל בורר יישב מעל הצד שלו */
  margin-inline: auto;
  margin-block-end: var(--dd-s-4);
}

.dd-ba-pick__field {
  display: grid;
  gap: 4px;
  min-inline-size: 0;
  flex: 0 1 260px;
}

.dd-ba-pick__label { font-size: 0.875rem; color: var(--dd-muted); }

.dd-ba-pick__select {
  font: inherit;
  font-weight: 600;
  min-block-size: 44px;
  padding-inline: 12px;
  border: 1.5px solid var(--dd-hairline);
  border-radius: 12px;
  background: var(--dd-white);
  color: var(--dd-ink);
}

.dd-ba__clip {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--dd-ba-pos, 50%);
  overflow: hidden;
}

.dd-ba__label {
  position: absolute;
  inset-block-start: var(--dd-s-4);
  z-index: 2;
  font-size: var(--dd-fs-xs);
  font-weight: var(--dd-fw-bold);
  padding: var(--dd-s-1) var(--dd-s-3);
  border-radius: var(--dd-r-pill);
  pointer-events: none;
}

/*
 * שתי התוויות יושבות על גבי תצלום, ולכן הן שתי המקומות היחידים
 * בהשוואה שבהם מותר מילוי אטום - קו מסגרת על תמונה לא נקרא.
 */
.dd-ba__label--before {
  inset-inline-start: var(--dd-s-4);
  background: var(--dd-white);
  color: var(--dd-muted);
}

.dd-ba__label--after {
  inset-inline-end: var(--dd-s-4);
  background: var(--dd-ink);
  color: var(--dd-white);
}

.dd-ba__divider {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--dd-ba-pos, 50%);
  inline-size: 3px;
  background: var(--dd-white);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .1);
}

.dd-ba__handle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--dd-white);
  color: var(--dd-ink);
  box-shadow: var(--dd-shadow-float);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ה-range שקוף ופרוס על כל הרכיב: הוא הבקרה האמיתית לעכבר, מגע ומקלדת. */
.dd-ba__range {
  position: absolute;
  inset: 0;
  z-index: 3;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}

.dd-ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  inline-size: 44px;
  block-size: 44px;
}

.dd-ba__range::-moz-range-thumb {
  inline-size: 44px;
  block-size: 44px;
  border: 0;
}

/* הפוקוס מסומן על הידית, כי ה-input עצמו בלתי נראה. */
.dd-ba__range:focus-visible { outline: none; }
.dd-ba:has(.dd-ba__range:focus-visible) .dd-ba__handle {
  outline: 3px solid var(--dd-ink);
  outline-offset: 3px;
}

/* ══ טבלת השוואה ═══════════════════════════════════════════════════════ */

.dd-compare {
  max-inline-size: 620px;
  margin-inline: auto;
  background: var(--dd-n-100);
  border: 1px solid var(--dd-hairline);
  border-radius: var(--dd-r-lg);
  overflow: hidden;
}

.dd-compare__table {
  inline-size: 100%;
  border-collapse: collapse;
  text-align: start;
}

.dd-compare__table thead th {
  background: var(--dd-surface-warm);
  padding: var(--dd-s-4) var(--dd-s-3);
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-bold);
}

.dd-compare__us { color: var(--dd-ink); }
.dd-compare__them { color: var(--dd-n-500); }

.dd-compare__table tbody tr + tr { border-block-start: 1px solid var(--dd-hairline); }

.dd-compare__label {
  padding: var(--dd-s-4) var(--dd-s-5);
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-medium);
  text-align: start;
}

.dd-compare__cell {
  inline-size: 76px;
  text-align: center;
  padding: var(--dd-s-4) var(--dd-s-2);
}

/*
 * ה-✓ בעיגול פסטל וה-✕ בלי - אותה שפה שבה כל מצב נבחר באתר מסומן
 * מאז מיתוג 2026. ירוק לא נכנס לכאן: הירוק היחיד בפלטה הוא הוואטסאפ,
 * והוא 1.98:1 על לבן - סימן שנושא משמעות ולא נראה הוא סימן שבור.
 */
.dd-compare__yes,
.dd-compare__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  font-weight: var(--dd-fw-xbold);
  font-size: 1rem;
  line-height: 1;
}

.dd-compare__yes {
  color: var(--dd-ink);
  background: var(--dd-pastel);
  border: 1.5px solid var(--dd-pastel-border);
}

.dd-compare__no {
  color: var(--dd-muted);
  border: 1.5px solid var(--dd-hairline);
}

/*
 * מתחת ל-560px הטבלה נערמת לכרטיסים - עדיף מגלילה אופקית בטבלה קצרה.
 *
 * עד 23/07 שני התאים ישבו זה לצד זה במרכז השורה, וכל תא נשא את שם
 * העמודה בסופו. זה נקרא כמשפט אחד ולא כהשוואה. עכשיו רשת של שני
 * טורים שווים עם קו מפריד: ימין "אצלנו", שמאל "מהמדף" - אותו סדר
 * שבטבלה בדסקטופ, ולכן העין לא צריכה ללמוד אותו פעמיים.
 */
@media (max-width: 560px) {
  .dd-compare__table,
  .dd-compare__table tbody,
  .dd-compare__table tr { display: block; }

  .dd-compare__table thead { display: none; }

  .dd-compare__table tr {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    row-gap: var(--dd-s-3);
    padding: var(--dd-s-4) var(--dd-s-4) var(--dd-s-3);
  }

  .dd-compare__label {
    grid-column: 1 / -1;
    padding: 0;
    font-weight: var(--dd-fw-bold);
    text-align: center;
  }

  .dd-compare__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dd-s-1);
    inline-size: auto;
    padding: 0;
  }

  /* הכותרת חסרה במצב הזה, ולכן כל תא נושא אותה בעצמו. */
  .dd-compare__cell::after {
    content: attr(data-col);
    font-size: var(--dd-fs-xs);
    font-weight: var(--dd-fw-medium);
    color: var(--dd-muted);
  }

  .dd-compare__cell--us::after { color: var(--dd-ink); font-weight: var(--dd-fw-bold); }

  .dd-compare__divider {
    display: block;
    inline-size: 1px;
    block-size: 34px;
    background: var(--dd-hairline);
  }
}

/* מעל 560 הרשת אינה בשימוש - התאים חוזרים להיות תאי טבלה. */
@media (min-width: 560.02px) {
  .dd-compare__divider { display: none; }
}

/* ══ למה קונים אצלנו - מובייל ══════════════════════════════════════════ */

/*
 * הכרטיסים היו מיושרים לימין בעוד שהכותרת ממורכזת. בעמודה אחת ברוחב
 * מסך זה קורא כשתי החלטות עיצוב שונות באותו סקשן.
 */
@media (max-width: 700px) {
  .dd-bigtrust__card { text-align: center; }
  .dd-bigtrust__icon { margin-inline: auto; }
}

/* ══ איך זה עובד ═══════════════════════════════════════════════════════ */

.dd-how {
  display: grid;
  gap: var(--dd-s-8);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  position: relative;
  /*
   * הקו המחבר נמתח ברוחב שלב שלם מעבר למרכז השלב. רק לשלב האחרון
   * הוא מוסתר - אבל כשה-auto-fit מקפל את הרשת לשתי שורות, השלב שבסוף
   * השורה הראשונה אינו :last-child, והקו שלו בורח מהרשת ומרחיב את הדף.
   * clip חותך אותו בלי ליצור מיכל גלילה ובלי לשבור sticky שמעליו.
   */
  overflow-x: clip;
}

.dd-how__step {
  position: relative;
  text-align: center;
  padding-inline: var(--dd-s-2);
}

.dd-how__num {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  margin-inline: auto;
  margin-block-end: var(--dd-s-4);
  border-radius: 50%;
  background: var(--dd-pastel);
  color: var(--dd-ink);
  font-weight: var(--dd-fw-xbold);
  font-size: 1.125rem;
  position: relative;
  z-index: 1;
}

/* הקו המחבר - נמתח מהעיגול אל השלב הבא, ומושמט מהשלב האחרון. */
@media (min-width: 768px) {
  .dd-how__step::before {
    content: "";
    position: absolute;
    inset-block-start: 24px;
    inset-inline-start: 50%;
    inline-size: 100%;
    block-size: 2px;
    background: var(--dd-hairline);
  }

  .dd-how__step:last-child::before { display: none; }
}

/* החץ מיותר בדסקטופ - שם הקו המחבר כבר מספר את הרצף. */
@media (min-width: 701px) {
  .dd-how__arrow { display: none; }
}

/* ── איך זה עובד - מובייל ─────────────────────────────────────────── */

@media (max-width: 700px) {
  .dd-how {
    grid-template-columns: 1fr;
    gap: var(--dd-s-2);
  }

  /*
   * כל שלב בכרטיס משלו. בלי מסגרת ארבעת השלבים נקראו כטקסט רץ אחד
   * ארוך, ואי אפשר היה לראות איפה נגמר שלב ומתחיל הבא.
   */
  .dd-how__step {
    padding: var(--dd-s-6) var(--dd-s-5);
    border: 1.5px solid var(--dd-hairline);
    border-radius: var(--dd-r-lg);
    background: var(--dd-white);
  }

  /* הקו האופקי של הדסקטופ חסר משמעות בטור - החץ תופס את מקומו. */
  .dd-how__step::before { display: none; }

  .dd-how__arrow {
    display: grid;
    place-items: center;
    color: var(--dd-muted);
    animation: dd-arrow-nudge 1.8s var(--dd-ease) infinite;
  }
}

@keyframes dd-arrow-nudge {
  0%, 100% { transform: translateY(-3px); opacity: .5; }
  50%      { transform: translateY(3px);  opacity: 1; }
}

/*
 * תנועה שאי אפשר לכבות היא מחסום נגישות ולא קישוט. עם ההעדפה דלוקה
 * החץ נשאר - הוא נושא את המשמעות "ואז" - אבל מפסיק לזוז.
 */
@media (prefers-reduced-motion: reduce) {
  .dd-how__arrow { animation: none; opacity: .75; }
}

.dd-how__title { margin-block-end: var(--dd-s-2); }

/* ══ טיפים ═════════════════════════════════════════════════════════════ */

.dd-tips__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.dd-tips__card { display: flex; flex-direction: column; }

.dd-tips__media { aspect-ratio: 16 / 10; }

.dd-tips__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.dd-tips__title {
  display: flex;
  align-items: baseline;
  gap: var(--dd-s-2);
}

.dd-tips__spark { color: var(--dd-gold); }

/* ══ אמון גדול ═════════════════════════════════════════════════════════ */

.dd-bigtrust__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* היה משטח שקוף ב-6% שנועד לרקע כהה. על שמנת הוא נעלם - לכן כרטיס לבן. */
.dd-bigtrust__card {
  padding: var(--dd-s-8) var(--dd-s-6);
  border-radius: var(--dd-r-xl);
  background: var(--dd-white);
  border: var(--dd-border);
}

.dd-bigtrust__icon {
  display: block;
  font-size: 1.75rem;
  margin-block-end: var(--dd-s-4);
}

.dd-bigtrust__title { margin-block-end: var(--dd-s-3); }

.dd-bigtrust__body { color: var(--dd-body); }

/* ══ שאלות נפוצות ══════════════════════════════════════════════════════ */

.dd-faq {
  max-inline-size: 760px;
  margin-inline: auto;
  border: 1px solid var(--dd-hairline);
  border-radius: var(--dd-r-lg);
  overflow: hidden;
  background: var(--dd-n-100);
}

.dd-faq__item + .dd-faq__item { border-block-start: 1px solid var(--dd-hairline); }

.dd-faq__heading { margin: 0; font-size: inherit; }

.dd-faq__q {
  inline-size: 100%;
  min-block-size: 56px;
  display: flex;
  align-items: center;
  gap: var(--dd-s-4);
  padding: var(--dd-s-4) var(--dd-s-5);
  text-align: start;
  font-weight: var(--dd-fw-bold);
  font-size: var(--dd-fs-body);
  color: var(--dd-ink);
}

.dd-faq__q-text { flex: 1 1 auto; }

.dd-faq__sign {
  flex: 0 0 auto;
  color: var(--dd-ink);
  font-size: 1.375rem;
  line-height: 1;
  transition: transform var(--dd-t-base) var(--dd-ease);
}

.dd-faq__item.is-open .dd-faq__sign { transform: rotate(45deg); }

/* 0fr → 1fr מנפיש גובה אמיתי בלי לנחש פיקסלים. */
.dd-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dd-t-base) var(--dd-ease);
}

.dd-faq__item.is-open .dd-faq__panel { grid-template-rows: 1fr; }

.dd-faq__panel-inner {
  overflow: hidden;
  min-block-size: 0;
}

.dd-faq__panel-inner p {
  padding: 0 var(--dd-s-5) var(--dd-s-5);
  color: var(--dd-n-700);
}

/* ══ דגמים נוספים ══════════════════════════════════════════════════════ */

.dd-related__grid {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/*
 * במובייל הכרטיסים נערמו בטור, וארבעה מוצרים דחפו מסך שלם של תוכן
 * למטה. שתי עמודות פותרות בדיוק את זה - "בשורה ולא בטור".
 *
 * נבנתה כאן תחילה קרוסלה נגללת, והיא נזנחה: במיכל גלילה RTL התוכן
 * משתרע לקואורדינטות שליליות, ו-Chrome מונה אותן ב-scrollWidth של
 * שורש המסמך גם כשהן נחתכות - 972 מול 390, שנקרא כגלישה אופקית בכל
 * בדיקה. היפוך המיכל ל-LTR העביר את הבעיה לצד השני במקום לפתור אותה.
 * רשת אינה גוררת אף אחת מהשאלות האלה, והיא גם חוסכת מהמבקר החלקה
 * כדי לגלות שיש מוצר רביעי.
 */
@media (max-width: 700px) {
  .dd-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--dd-s-3);
  }

  /* בשתי עמודות הכרטיס צר - הטקסט מתכווץ כדי שהשם לא יישבר לארבע שורות. */
  .dd-related__name { font-size: var(--dd-fs-sm); }

  /* בלי nowrap סימן ה-₪ נופל לשורה משלו והמחיר נקרא כשני מספרים. */
  .dd-related__now,
  .dd-related__was { font-size: 1rem; white-space: nowrap; }
}

.dd-related__card { display: flex; flex-direction: column; }

.dd-related__media { aspect-ratio: 1 / 1; }

.dd-related__body {
  display: flex;
  flex-direction: column;
  gap: var(--dd-s-3);
  flex: 1 1 auto;
}

.dd-related__name { margin-block-end: 0; }

.dd-related__prices {
  display: flex;
  align-items: baseline;
  gap: var(--dd-s-2);
  margin-block-start: auto;
}

.dd-related__now {
  font-weight: var(--dd-fw-bold);
  font-size: 1.0625rem;
}

.dd-related__was {
  font-size: var(--dd-fs-xs);
  color: var(--dd-muted);
  text-decoration: line-through;
}

/* ══ טופס לידים ════════════════════════════════════════════════════════ */

/*
 * הטופס היה פאנל כהה עם גרדיאנט עד מיתוג 2026. עכשיו הוא פאנל שמנת
 * במסגרת דקה - אותה חזות שהמדריך נותן לכל כרטיס.
 */
.dd-lead {
  max-inline-size: 720px;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--dd-r-xl);
  background: var(--dd-cream);
  border: var(--dd-border);
  color: var(--dd-body);
}

.dd-lead__title { color: var(--dd-ink); margin-block-end: var(--dd-s-3); }

.dd-lead__sub {
  color: var(--dd-muted);
  font-size: var(--dd-fs-sm);
  margin-block-end: var(--dd-s-8);
}

.dd-lead__alt {
  display: flex;
  flex-direction: column;
  gap: var(--dd-s-3);
  margin-block-start: var(--dd-s-8);
  padding-block-start: var(--dd-s-6);
  border-block-start: 1px solid var(--dd-hairline);
  text-align: center;
}

.dd-lead__or {
  font-size: var(--dd-fs-sm);
  color: var(--dd-n-500);
}

.dd-lead__note { color: var(--dd-n-500); }

/* ══ הרכיבים הצפים ═════════════════════════════════════════════════════ */

.dd-wa-icon { flex: 0 0 auto; }

/* ── בר תחתון לנייד ─────────────────────────────────────────────────── */

.dd-sticky-bar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--dd-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--dd-s-4);
  padding: var(--dd-s-3) var(--dd-s-4);
  padding-block-end: calc(var(--dd-s-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--dd-white) 96%, transparent);
  backdrop-filter: blur(10px);
  border-block-start: 1px solid var(--dd-hairline);
  /* בר דביק - אחד משני האלמנטים שבאמת מרחפים, ולכן שומר צל עדין. */
  box-shadow: 0 -6px 20px rgba(17, 17, 17, .08);
  animation: dd-slide-up var(--dd-t-base) var(--dd-ease);
}

@keyframes dd-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.dd-sticky-bar__price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.dd-sticky-bar__now {
  font-weight: var(--dd-fw-bold);
  font-size: 1.1875rem;
}

.dd-sticky-bar__save { color: var(--dd-muted); }

.dd-sticky-bar__cta { flex: 1 1 auto; }

/* ── הבר הדביק לדסקטופ ──────────────────────────────────────────────
 * מוסתר לגמרי מתחת ל-768: שם dd-sticky-bar מציג את אותו מידע.
 */

.dd-topbar { display: none; }

@media (min-width: 768px) {
  .dd-topbar {
    display: block;
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--dd-z-sticky);
    animation: dd-slide-up var(--dd-t-base) var(--dd-ease);
    /* הרצועה משתרעת על כל הרוחב, אבל רק הקופסה שבתוכה לחיצה. */
    pointer-events: none;
  }

  .dd-topbar__inner {
    pointer-events: auto;
    max-inline-size: var(--dd-container);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: var(--dd-s-4);
    padding: var(--dd-s-3) var(--dd-s-6);
    background: color-mix(in srgb, var(--dd-white) 97%, transparent);
    backdrop-filter: blur(12px);
    border: 1.5px solid var(--dd-hairline);
    border-block-end: none;
    border-start-start-radius: var(--dd-r-lg);
    border-start-end-radius: var(--dd-r-lg);
    /* בר דביק - אחד משני האלמנטים שבאמת מרחפים, ולכן שומר צל עדין. */
    box-shadow: 0 -6px 22px rgba(17, 17, 17, .08);
  }

  .dd-topbar__thumb {
    flex: 0 0 auto;
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--dd-r-sm);
    overflow: hidden;
    background: var(--dd-stage);
    border: 1px solid var(--dd-hairline);
  }

  .dd-topbar__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
    display: block;
  }

  .dd-topbar__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-inline-size: 0;
  }

  .dd-topbar__name {
    font-weight: var(--dd-fw-xbold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dd-topbar__selection {
    font-size: var(--dd-fs-sm);
    color: var(--dd-n-700);
  }

  .dd-topbar__price {
    margin-inline-start: auto;
    display: flex;
    align-items: baseline;
    gap: var(--dd-s-2);
  }

  .dd-topbar__now {
    font-weight: var(--dd-fw-black);
    font-size: 1.25rem;
  }

  .dd-topbar__was {
    color: var(--dd-muted);
    font-size: var(--dd-fs-sm);
    text-decoration: line-through;
  }

  .dd-topbar__cta { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .dd-topbar { animation: none; }
}

@media (min-width: 768px) {
  /* מעל 768 התפקיד עובר לבר העליון - לא מציגים את שניהם. */
  .dd-sticky-bar { display: none; }
}



@keyframes dd-slide-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}








@media (max-width: 767.98px) {
}

/* ── FAB ובועה ──────────────────────────────────────────────────────── */

.dd-fab-wrap {
  position: fixed;
  inset-block-end: var(--dd-s-6);
  inset-inline-end: var(--dd-s-6);
  z-index: var(--dd-z-fab);
  display: flex;
  align-items: flex-end;
  gap: var(--dd-s-3);
  transition: opacity var(--dd-t-base) var(--dd-ease),
              transform var(--dd-t-base) var(--dd-ease);
}

.dd-fab-wrap.is-hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.dd-fab {
  inline-size: 60px;
  block-size: 60px;
  border-radius: 50%;
  background: var(--dd-whatsapp);
  color: var(--dd-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--dd-shadow-lg);
}

.dd-bubble {
  position: relative;
  max-inline-size: 240px;
  padding: var(--dd-s-4) var(--dd-s-5);
  border-radius: var(--dd-r-md);
  background: var(--dd-white);
  border: var(--dd-border);
  color: var(--dd-body);
  font-size: var(--dd-fs-sm);
  line-height: 1.45;
  box-shadow: var(--dd-shadow-float);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dd-t-base) var(--dd-ease),
              transform var(--dd-t-base) var(--dd-ease);
}

.dd-bubble.is-in { opacity: 1; transform: translateY(0); }

.dd-bubble__close {
  position: absolute;
  inset-block-start: calc(var(--dd-s-2) * -1);
  inset-inline-start: calc(var(--dd-s-2) * -1);
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  background: var(--dd-ink);
  color: var(--dd-white);
  font-size: var(--dd-fs-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--dd-shadow-sm);
}

.dd-bubble__text { display: block; }

/*
 * בנייד ה-FAB מוסתר (ראה refinements.css), אבל הבועה נשארת - היא
 * ההזמנה לשיחה, וה-CTA שהיא מפנה אליו הוא כפתור הוואטסאפ שבבר הדביק.
 *
 * לכן היא מעוגנת לבר ולא לפינה: הכרעת הלקוח מ-23/07 הייתה לא להחזיר
 * את ה-FAB אלא לוודא שההודעה יוצאת ליד הכפתור שאליו היא מתכוונת.
 * בועה שמרחפת מעל אזור ריק נראית כמו שגיאת מיקום.
 */
@media (max-width: 767.98px) {
  .dd-fab-wrap {
    inset-block-end: calc(73px + var(--dd-s-3));
    inset-inline-end: var(--dd-s-4);
    inset-inline-start: var(--dd-s-4);
    /* כפתור הוואטסאפ בבר תופס את הצד השמאלי - הבועה יוצאת מעליו. */
    justify-content: flex-end;
  }

  .dd-bubble { max-inline-size: 260px; }

  /* בלי הבר הדביק אין למה להיצמד - חוזרים לפינה. */
  .dd-fab-wrap:not(.is-above-bar) { inset-block-end: var(--dd-s-6); }
}

/* ══ פופאפ "השאירו פרטים" ══════════════════════════════════════════════ */

.dd-leadbox {
  position: fixed;
  inset: 0;
  z-index: var(--dd-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--dd-s-4);
}

.dd-leadbox[hidden] { display: none; }

.dd-leadbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .58);
  border: 0;
  cursor: pointer;
}

.dd-leadbox__panel {
  position: relative;
  inline-size: min(460px, 100%);
  /* הטופס גבוה ממסך נמוך - הפאנל עצמו נגלל, לא הדף שמאחוריו. */
  max-block-size: min(88dvh, 760px);
  overflow-y: auto;
  padding: var(--dd-s-6);
  background: var(--dd-white);
  border-radius: var(--dd-r-lg);
  box-shadow: var(--dd-shadow-lg);
  display: grid;
  gap: var(--dd-s-4);
}

.dd-leadbox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dd-s-3);
}

.dd-leadbox__title {
  margin: 0;
  font-size: var(--dd-fs-h3);
  font-weight: var(--dd-fw-xbold);
}

.dd-leadbox__sub {
  margin: var(--dd-s-1) 0 0;
  font-size: var(--dd-fs-xs);
  color: var(--dd-muted);
}

.dd-leadbox__close {
  flex: 0 0 auto;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  border: 1px solid var(--dd-hairline);
  background: var(--dd-white);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--dd-ink);
  cursor: pointer;
}

.dd-leadbox__selection {
  margin: 0;
  padding: var(--dd-s-3) var(--dd-s-4);
  background: var(--dd-cream);
  border-inline-start: 3px solid var(--dd-ink);
  border-radius: var(--dd-r-sm);
  font-size: var(--dd-fs-sm);
}

.dd-leadbox__selectionLabel { color: var(--dd-muted); }

.dd-leadbox__selectionValue {
  font-weight: var(--dd-fw-bold);
  color: var(--dd-ink);
}

/* ══ תנועה מופחתת ══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .dd-spin__shimmer { animation: none; }
  .dd-sticky-bar,
  .dd-customers__card:hover .dd-customers__media img { transform: none; }
  .dd-reels__strip { scroll-behavior: auto; }
  .dd-faq__panel { transition: none; }
}

/* טיפים עם אייקון במקום תמונה (05/10). */
.dd-tips__icon {
  display: grid;
  place-items: center;
  inline-size: 60px;
  block-size: 60px;
  margin: var(--dd-s-5) var(--dd-s-5) 0;
  border-radius: 50%;
  background: var(--dd-cream-warm);
  color: var(--dd-ink);
}