/*
 * roomviz.css - עורך "צפייה אצלי בבית".
 *
 * הכל בטוקנים מ-tokens.css. אין hex קשיח.
 * הכל בתכונות לוגיות (inline-start / inline-end) - הדף RTL, ובקרות
 * שנכתבות ב-left/right נשברות ברגע שמישהו מסתכל עליהן באנגלית.
 */

/* ── עזרים שהעורך תלוי בהם ─────────────────────────────────────────── */

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

html.dd-scroll-lock,
html.dd-scroll-lock body {
  overflow: hidden;
}

/* ── מעטפת המודאל ──────────────────────────────────────────────────── */

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

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

.dd-rv__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .62);
  backdrop-filter: blur(2px);
}

.dd-rv__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: min(1120px, 100%);
  max-block-size: min(92dvh, 900px);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--dd-cream);
  border-radius: var(--dd-r-lg);
  box-shadow: var(--dd-shadow-lg);
  padding: var(--dd-s-6);
  gap: var(--dd-s-4);
  animation: dd-rv-in var(--dd-t-base) var(--dd-ease);
}

@keyframes dd-rv-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

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

/* ── כותרת ─────────────────────────────────────────────────────────── */

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

.dd-rv__title {
  margin: 0;
  font-size: var(--dd-fs-h2);
  font-weight: var(--dd-fw-black);
  line-height: var(--dd-lh-tight);
  color: var(--dd-ink);
}

/* הבטחת הפרטיות היא פיצ'ר אמון, לא הערת שוליים - לכן היא בולטת ובצבע המותג */
.dd-rv__privacy {
  margin: var(--dd-s-2) 0 0;
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-medium);
  color: var(--dd-ink);
  max-inline-size: 60ch;
}

.dd-rv__close {
  flex: 0 0 auto;
  inline-size: 40px;
  block-size: 40px;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--dd-ink);
  background: var(--dd-surface);
  border: 1px solid var(--dd-hairline);
  border-radius: var(--dd-r-pill);
  cursor: pointer;
  transition: background var(--dd-t-fast) var(--dd-ease);
}

.dd-rv__close:hover { background: var(--dd-n-200); }

/* ── הודעות ────────────────────────────────────────────────────────── */

.dd-rv__error,
.dd-rv__notice,
.dd-rv__busy {
  margin: 0;
  padding: var(--dd-s-3) var(--dd-s-4);
  border-radius: var(--dd-r-sm);
  font-size: var(--dd-fs-sm);
}

.dd-rv__error {
  background: var(--dd-surface-warm);
  border-inline-start: 4px solid var(--dd-danger);
  color: var(--dd-n-900);
}

.dd-rv__notice {
  background: var(--dd-surface);
  border-inline-start: 4px solid var(--dd-ink);
  inline-size: 100%;
}

.dd-rv__busy {
  background: var(--dd-surface);
  color: var(--dd-muted);
}

.dd-rv__help {
  display: block;
  margin-block-start: var(--dd-s-1);
  font-size: var(--dd-fs-xs);
  color: var(--dd-muted);
}

/* ── אזור ההעלאה ───────────────────────────────────────────────────── */

.dd-rv__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dd-s-3);
  min-block-size: 260px;
  padding: var(--dd-s-8) var(--dd-s-4);
  text-align: center;
  background: var(--dd-surface);
  border: 2px dashed var(--dd-n-300);
  border-radius: var(--dd-r-md);
  cursor: pointer;
  transition: border-color var(--dd-t-fast) var(--dd-ease),
              background var(--dd-t-fast) var(--dd-ease);
}

.dd-rv__drop:hover,
.dd-rv__drop:focus-visible,
.dd-rv__drop.is-over {
  border-color: var(--dd-ink);
  background: var(--dd-surface-warm);
}

.dd-rv__drop-title {
  margin: 0;
  font-size: var(--dd-fs-h3);
  font-weight: var(--dd-fw-bold);
}

.dd-rv__drop-sub {
  margin: 0;
  font-size: var(--dd-fs-sm);
  color: var(--dd-muted);
}

.dd-rv__drop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dd-s-3);
  justify-content: center;
  margin-block-start: var(--dd-s-2);
}

/*
 * בזמן מצלמה חיה אין מה להוריד ואין מה לשלוח - הפריים משתנה עשרות
 * פעמים בשנייה, וייצוא היה תופס רגע אקראי ולא את מה שהמבקר ראה.
 * שני הכפתורים חוזרים ברגע שהתמונה מוקפאת.
 */
.dd-rv__dialog.is-live [data-roomviz-download],
.dd-rv__dialog.is-live [data-roomviz-whatsapp] { display: none; }

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

.dd-rv__place {
  position: absolute;
  inset-block-end: var(--dd-s-5);
  inset-inline: var(--dd-s-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dd-s-3);
  /* הכפתור לחיץ, השכבה עצמה לא - אחרת היא בולעת את ההקשה על הרצפה. */
  pointer-events: none;
}

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

.dd-rv__place-btn { pointer-events: auto; }

.dd-rv__place-hint {
  margin: 0;
  padding: var(--dd-s-2) var(--dd-s-4);
  border-radius: var(--dd-r-pill);
  background: rgba(17, 17, 17, .72);
  color: var(--dd-white);
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-medium);
  text-align: center;
}

.dd-rv__dialog.is-live-arm .dd-rv__controls,
.dd-rv__dialog.is-live-arm .dd-rv__foot,
.dd-rv__dialog.is-live-arm .dd-rv__calib,
.dd-rv__dialog.is-live-arm .dd-rv__handles,
.dd-rv__dialog.is-live-pick .dd-rv__controls,
.dd-rv__dialog.is-live-pick .dd-rv__foot,
.dd-rv__dialog.is-live-pick .dd-rv__calib,
.dd-rv__dialog.is-live-pick .dd-rv__handles { display: none; }

/*
 * אחרי ההצבה: הידיות נשארות מוסתרות והסרגלים מוסתרים, כי המבקר
 * גורר וצובט ישירות. מה שנשאר הוא הפוטר - שמירה ושיתוף.
 */
.dd-rv__dialog.is-live-placed .dd-rv__controls,
.dd-rv__dialog.is-live-placed .dd-rv__handles { display: none; }

/* במצלמה חיה הבמה היא הממשק - היא לוקחת את כל רוחב הדיאלוג. */
.dd-rv__dialog.is-live .dd-rv__editor { grid-template-columns: minmax(0, 1fr); }

.dd-rv__dialog.is-live .dd-rv__stage { position: relative; }

/* ── הבמה ──────────────────────────────────────────────────────────── */

.dd-rv__editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--dd-s-5);
  align-items: start;
}

.dd-rv__stage {
  position: relative;
  grid-column: 1;
  aspect-ratio: 4 / 3;
  inline-size: 100%;
  background: var(--dd-stage);
  border: 1px solid var(--dd-hairline);
  border-radius: var(--dd-r-md);
  overflow: hidden;
  touch-action: none; /* אחרת המגע גורר את הדף במקום את השולחן */
  cursor: grab;
}

.dd-rv__stage:active { cursor: grabbing; }

.dd-rv__canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/*
 * שכבת העל היא מרחב קואורדינטות של הקנבס ולא טקסט: ה-JS כותב
 * transform: translate(x, y) בפיקסלים פיזיים. לכן היא נעולה ל-LTR -
 * ב-RTL הציר האופקי היה מתהפך מול הקנבס והידיות היו נוחתות בצד הלא נכון.
 */
.dd-rv__overlay {
  position: absolute;
  inset: 0;
  direction: ltr;
  pointer-events: none;
}

.dd-rv__handles { position: absolute; inset: 0; }
.dd-rv__handles[hidden] { display: none; }

.dd-rv__handle,
.dd-rv__dot {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  margin-inline-start: -11px;
  margin-block-start: -11px;
  inline-size: 22px;
  block-size: 22px;
  padding: 0;
/*
 * הידיות יושבות על תצלום החדר של המבקר, שיכול להיות בכל צבע. לכן הן
 * לבן־על־שחור: הצירוף היחיד שנשאר קריא מעל תמונה שרירותית. הידית
 * המסובבת אטומה ונקודת הכיול פסטלית, כדי שאפשר יהיה להבחין ביניהן.
 */
  background: var(--dd-white);
  border: 2px solid var(--dd-ink);
  border-radius: var(--dd-r-pill);
  box-shadow: var(--dd-shadow-float);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}

.dd-rv__handle--rotate {
  background: var(--dd-ink);
  border-color: var(--dd-white);
}

.dd-rv__dot {
  background: var(--dd-pastel);
  border-color: var(--dd-ink);
  inline-size: 26px;
  block-size: 26px;
  margin-inline-start: -13px;
  margin-block-start: -13px;
}

.dd-rv:not(.is-calibrating) .dd-rv__dot { display: none; }

.dd-rv__handle:focus-visible,
.dd-rv__dot:focus-visible {
  outline: 3px solid var(--dd-ink);
  outline-offset: 2px;
}

/* ── כיול ──────────────────────────────────────────────────────────── */

.dd-rv__calib {
  grid-column: 2;
  padding: var(--dd-s-4);
  background: var(--dd-surface-warm);
  border-radius: var(--dd-r-md);
}

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

.dd-rv__calib-title {
  margin: 0 0 var(--dd-s-2);
  font-size: var(--dd-fs-h3);
  font-weight: var(--dd-fw-bold);
}

.dd-rv__calib-text {
  margin: 0 0 var(--dd-s-3);
  font-size: var(--dd-fs-sm);
  line-height: var(--dd-lh-body);
  color: var(--dd-n-700);
}

.dd-rv__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dd-s-2);
  margin-block-end: var(--dd-s-4);
}

.dd-rv__preset {
  padding: var(--dd-s-1) var(--dd-s-3);
  font: inherit;
  font-size: var(--dd-fs-xs);
  color: var(--dd-n-700);
  background: var(--dd-cream);
  border: 1px solid var(--dd-n-300);
  border-radius: var(--dd-r-pill);
  cursor: pointer;
}

.dd-rv__preset[aria-pressed="true"] {
  color: var(--dd-ink);
  background: var(--dd-pastel);
  border-color: var(--dd-ink);
}

.dd-rv__calib-row {
  display: flex;
  flex-direction: column;
  gap: var(--dd-s-1);
  margin-block-end: var(--dd-s-4);
}

.dd-rv__number {
  inline-size: 8rem;
  padding: var(--dd-s-2) var(--dd-s-3);
  font: inherit;
  color: var(--dd-ink);
  background: var(--dd-cream);
  border: 1px solid var(--dd-n-300);
  border-radius: var(--dd-r-sm);
}

.dd-rv__calib-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dd-s-3);
}

/* ── בקרות ─────────────────────────────────────────────────────────── */

.dd-rv__controls {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--dd-s-5);
}

.dd-rv__group {
  padding: var(--dd-s-4);
  background: var(--dd-surface);
  border: 1px solid var(--dd-hairline);
  border-radius: var(--dd-r-md);
}

.dd-rv__group-title {
  margin: 0 0 var(--dd-s-3);
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-bold);
  letter-spacing: .02em;
  color: var(--dd-n-700);
}

.dd-rv__field { margin-block-end: var(--dd-s-4); }
.dd-rv__field:last-child { margin-block-end: 0; }

.dd-rv__label {
  display: block;
  margin-block-end: var(--dd-s-1);
  font-size: var(--dd-fs-sm);
  font-weight: var(--dd-fw-medium);
  color: var(--dd-n-700);
}

.dd-rv__field--switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dd-s-3);
  margin-block-start: var(--dd-s-4);
}

.dd-rv__field--switch .dd-rv__label { margin-block-end: 0; }

.dd-rv__switch {
  inline-size: 22px;
  block-size: 22px;
  accent-color: var(--dd-ink);
}

/* סליידרים - input[type=range] אמיתי, כדי שמקלדת וקורא מסך יעבדו בחינם */
.dd-rv input[type="range"] {
  inline-size: 100%;
  block-size: 28px;
  accent-color: var(--dd-ink);
  background: transparent;
  cursor: pointer;
}

.dd-rv input[type="range"]:focus-visible {
  outline: 3px solid var(--dd-ink);
  outline-offset: 3px;
  border-radius: var(--dd-r-pill);
}

/* ── גימורים ───────────────────────────────────────────────────────── */

.dd-rv__finishes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: var(--dd-s-2);
}

.dd-rv__finish {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dd-s-1);
  padding: var(--dd-s-2);
  font: inherit;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--dd-r-sm);
  cursor: pointer;
}

.dd-rv__finish[aria-pressed="true"] {
  border-color: var(--dd-ink);
  background: var(--dd-surface-warm);
}

.dd-rv__finish-chip {
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--dd-r-pill);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12);
}

.dd-rv__finish-name {
  font-size: var(--dd-fs-xs);
  color: var(--dd-n-700);
}

/* ── פעולות ──────────────────────────────────────────────────────── */

.dd-rv__group--actions { background: transparent; border-style: dashed; }

.dd-rv__history {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dd-s-2);
}

.dd-rv__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dd-s-3);
  padding-block-start: var(--dd-s-4);
  border-block-start: 1px solid var(--dd-hairline);
}

/*
 * כפתורי הבסיס מגיעים מ-components.css. כאן רק מה שייחודי לעורך,
 * ורק כנפילה בטוחה אם הרכיב הכללי עוד לא נטען.
 */
.dd-rv .dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dd-s-2);
  padding: var(--dd-s-3) var(--dd-s-5);
  font: inherit;
  font-weight: var(--dd-fw-bold);
  border-radius: var(--dd-r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter var(--dd-t-fast) var(--dd-ease);
}

.dd-rv .dd-btn:disabled { opacity: .45; cursor: not-allowed; }
.dd-rv .dd-btn:not(:disabled):hover { filter: brightness(.96); }

.dd-rv .dd-btn--primary { color: var(--dd-ink); background: var(--dd-pastel); }
.dd-rv .dd-btn--ghost   { color: var(--dd-n-700); background: var(--dd-cream); border-color: var(--dd-n-300); }
.dd-rv .dd-btn--link    { color: var(--dd-n-500); background: transparent; text-decoration: underline; padding-inline: 0; }
.dd-rv .dd-btn--wa      { color: var(--dd-n-900); background: var(--dd-whatsapp); }

.dd-rv .dd-btn:focus-visible {
  outline: 3px solid var(--dd-ink);
  outline-offset: 2px;
}

/* ── נייד: הבקרות הופכות לגיליון תחתון ────────────────────────────── */

@media (max-width: 860px) {
  .dd-rv { padding: 0; }

  .dd-rv__dialog {
    inline-size: 100%;
    max-block-size: 100dvh;
    block-size: 100dvh;
    border-radius: 0;
    padding: var(--dd-s-4);
    gap: var(--dd-s-3);
  }

  .dd-rv__editor {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dd-s-3);
  }

  .dd-rv__stage,
  .dd-rv__calib,
  .dd-rv__controls,
  .dd-rv__foot { grid-column: 1; }

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

  /* גיליון תחתון: הבקרות נצמדות לתחתית המסך ונגללות בפני עצמן */
  .dd-rv__controls {
    position: sticky;
    inset-block-end: 0;
    max-block-size: 46dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--dd-s-3);
    background: var(--dd-cream);
    border-start-start-radius: var(--dd-r-lg);
    border-start-end-radius: var(--dd-r-lg);
    box-shadow: 0 -8px 28px rgba(17, 17, 17, .10);
  }

  .dd-rv__foot {
    position: sticky;
    inset-block-end: 0;
    background: var(--dd-cream);
    padding-block: var(--dd-s-3);
  }

  .dd-rv .dd-btn { flex: 1 1 auto; }

  /* יעדי מגע גדולים יותר - 22px זה קטן מדי לאצבע */
  .dd-rv__handle,
  .dd-rv__dot {
    inline-size: 30px;
    block-size: 30px;
    margin-inline-start: -15px;
    margin-block-start: -15px;
  }
}

@media (max-width: 400px) {
  .dd-rv__drop { min-block-size: 200px; padding: var(--dd-s-5) var(--dd-s-3); }
  .dd-rv__finishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── כפתור הפתיחה בגלריה ──────────────────────────────────────────── */

.dd-roomviz-trigger { white-space: nowrap; }