html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  background: #eef1f4;
  color: #1f2937;
}

body {
  overflow: hidden;
}

.topbar {
  height: 64px;
  box-sizing: border-box;
  background: #1f2937;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  direction: rtl;
}

.topbar-right,
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.upload-label {
  background: #2563eb;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

#pdfUpload {
  display: none;
}

.page-info {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.95;
}

.layout {
  height: calc(100vh - 64px);
  display: flex;
  flex-direction: row-reverse;
}

.toolbar {
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  background: #ffffff;
  border-left: 1px solid #d7dce2;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
  direction: rtl;
}

.panel {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

.panel h2 {
  margin: 0 0 12px 0;
  font-size: 17px;
  font-weight: 800;
}

.panel label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}

.panel input,
.panel select,
.panel button {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 8px;
  font: inherit;
}

.panel input,
.panel select {
  padding: 10px 12px;
  border: 1px solid #cfd6dd;
  background: #ffffff;
}

.panel button {
  padding: 10px 12px;
  border: none;
  background: #334155;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.panel button:hover {
  opacity: 0.94;
}

.button-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.button-row .danger {
  background: #b91c1c;
}

.success {
  background: #15803d !important;
}

.primary {
  background: #1d4ed8 !important;
}

.danger {
  background: #b91c1c !important;
}

.note {
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
  margin-top: 4px;
}

.tool-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.tool-item {
  text-align: right;
}

.panel-docs { background: #eef4ff; }
.panel-templates { background: #f5f3ff; }
.panel-fid { background: #ecfeff; }
.panel-general { background: #f3f4f6; }
.panel-customer { background: #ecfdf5; }
.panel-adviser { background: #fdf2f8; }
.panel-selected { background: #fff7ed; }
.panel-nav { background: #f8fafc; }
.panel-form-settings { background: #f0f9ff; }
.panel-feed { background: #f0fdf4; }

/* collapsible toolbar sections */
details.toolbar-collapsible { cursor: default; }
details.toolbar-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}
details.toolbar-collapsible > summary::-webkit-details-marker { display: none; }
details.toolbar-collapsible > summary h2 {
  margin: 0;
  pointer-events: none;
}
details.toolbar-collapsible > summary::after {
  content: "▸";
  font-size: 13px;
  color: #64748b;
  transition: transform 0.2s;
  flex-shrink: 0;
}
details.toolbar-collapsible[open] > summary::after {
  content: "▾";
}
details.toolbar-collapsible[open] > summary {
  margin-bottom: 12px;
}

/* QA variant buttons — dark teal, white text */
.tool-item-qa {
  background: #0f766e !important;
  color: #fff !important;
  font-size: 13px;
}
.tool-item-qa:hover { opacity: 0.88; }

/* Customer field buttons — emerald green, white text */
.panel-customer .tool-item:not(.tool-item-qa) {
  background: #059669 !important;
  color: #fff !important;
}
.panel-customer .tool-item:not(.tool-item-qa):hover {
  background: #047857 !important;
}

/* Adviser field buttons — violet, white text */
.panel-adviser .tool-item {
  background: #7c3aed !important;
  color: #fff !important;
}
.panel-adviser .tool-item:hover {
  background: #6d28d9 !important;
}

/* Static embedded image button — sky blue bg, DARK navy text */
.tool-item-static-image {
  background: #e0f2fe !important;
  color: #0c4a6e !important;
  border: 1.5px solid #0ea5e9 !important;
  font-weight: 800;
}
.tool-item-static-image:hover {
  background: #bae6fd !important;
}

/* sub-label divider inside panel */
.toolbar-sub-label {
  font-size: 11px;
  font-weight: 700;
  color: #0f766e;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 10px 0 6px;
  padding-top: 8px;
  border-top: 1px solid #a7f3d0;
}

/* QA panel */
.panel-qa { background: #f0fdfa; }

/* ── Field-property boxes inside "שדה נבחר" ── */
.field-prop-box {
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  border: 1px solid rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-prop-box-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
/* Box 1 — שדה חובה */
.field-prop-required {
  background: #fef2f2;
  border-color: #fca5a5;
}
.field-prop-required .field-prop-box-title { color: #b91c1c; }

/* Box 2 — הגדרות תאריך */
.field-prop-date {
  background: #eff6ff;
  border-color: #93c5fd;
}
.field-prop-date .field-prop-box-title { color: #1d4ed8; }

/* Box 3 — עיצוב כותרת */
.field-prop-title-style {
  background: #faf5ff;
  border-color: #c4b5fd;
}
.field-prop-title-style .field-prop-box-title { color: #6d28d9; }

/* Box 4 — הגדרות בחירה */
.field-prop-choice {
  background: #f0fdf4;
  border-color: #86efac;
}
.field-prop-choice .field-prop-box-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.field-prop-choice .field-prop-box-title-text {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #15803d;
  white-space: nowrap;
}
.field-prop-choice .field-prop-box-title-row select {
  flex: 1;
}
/* override panel-button white background for selects inside boxes */
.field-prop-box select,
.field-prop-box input[type="number"],
.field-prop-box input[type="text"] {
  background: #fff !important;
  color: #1f2937 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px;
  padding: 5px 8px;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}
.field-prop-box label {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  margin: 2px 0 0;
}
/* checkbox row inside required box */
.field-prop-box .required-toggle-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #374151;
}
.field-prop-box .required-toggle-box input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  border: none !important;
  padding: 0 !important;
  flex-shrink: 0;
}
/* "אחר" checkbox row */
.choice-other-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.choice-other-header-row input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  border: none !important;
  padding: 0 !important;
  flex-shrink: 0;
}
.choice-other-header-row label {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #374151 !important;
  cursor: pointer;
}
/* color picker row */
.color-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-picker-row input[type="color"] {
  width: 44px !important;
  height: 32px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  padding: 2px !important;
  cursor: pointer;
  flex-shrink: 0;
}
.color-picker-row button {
  flex: 1;
  font-size: 12px;
  padding: 5px 8px;
  background: #e5e7eb !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  width: auto !important;
}

.workspace {
  flex: 1;
  height: 100%;
  overflow: auto;
  padding: 24px;
  box-sizing: border-box;
  direction: ltr;
}

.pages-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: 100%;
}

.page-shell {
  position: relative;
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(0,0,0,0.12);
  border: 3px solid transparent;
  border-radius: 4px;
}

.page-shell.active-page {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15), 0 2px 14px rgba(0,0,0,0.12);
}

.page-meta {
  position: absolute;
  top: -30px;
  right: 0;
  background: #2563eb;
  color: #ffffff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.page-drag-handle {
  cursor: grab;
  font-size: 15px;
  opacity: 0.75;
  line-height: 1;
}
.page-drag-handle:active {
  cursor: grabbing;
}

.page-shell-ghost {
  opacity: 0.4;
  border: 2px dashed #2563eb !important;
}

.page-shell-chosen {
  box-shadow: 0 0 0 3px rgba(37,99,235,0.4), 0 4px 20px rgba(0,0,0,0.18) !important;
}

.page-canvas {
  display: block;
  background: #ffffff;
}

/* ===== AI Form Generator Modal ===== */
.ai-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ai-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  direction: rtl;
}

.ai-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
}

.ai-modal-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
}

.ai-modal-close {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-modal-close:hover { background: rgba(255,255,255,0.35); }

.ai-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-img-preview {
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  align-self: center;
}

.ai-status-msg {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  padding: 8px 0;
}

.ai-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid #e5e7eb;
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: ai-spin 0.75s linear infinite;
  vertical-align: middle;
  margin-left: 6px;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

.ai-fields-header {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}

.ai-fields-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 10px;
}

.ai-field-type-badge {
  background: #ede9fe;
  color: #5b21b6;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.ai-field-label-input {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
  direction: rtl;
  background: #fff;
}
.ai-field-label-input:focus {
  outline: none;
  border-color: #7c3aed;
}

.ai-field-delete {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.ai-field-delete:hover { color: #dc2626; background: #fee2e2; }

.ai-error-msg {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
}

.ai-modal-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
  justify-content: flex-start;
}

.ai-btn-cancel {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1.5px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ai-btn-cancel:hover { background: #f3f4f6; }

.ai-btn-confirm {
  padding: 9px 20px;
  border-radius: 8px;
  border: none;
  background: #7c3aed;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex: 1;
}
.ai-btn-confirm:hover { background: #6d28d9; }
.ai-btn-confirm:disabled { background: #c4b5fd; cursor: default; }

.page-overlay {
  position: absolute;
  inset: 0;
}

.field-box {
  position: absolute;
  border: 2px dashed #475569;
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: move;
  user-select: none;
  overflow: visible;
  z-index: 1; /* default: above image_upload fields */
}
/* image_upload sits behind other fields so a signature dragged on top stays visible */
.field-box[data-type="image_upload"] {
  z-index: 0;
}

.field-box.selected {
  border: 2px solid #f97316;
  box-shadow: 0 0 0 2px rgba(249,115,22,0.18);
}

.field-label {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #1f2937;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

.field-box[data-type="title"] .field-label {
  font-size: 24px;
  font-weight: 800;
}

.field-box[data-type="checkbox"] .field-label {
  font-size: 16px;
}

.field-box[data-type="signature"] .field-label {
  font-style: italic;
}

/* Static embedded image field */
.field-box[data-type="static_image"] {
  overflow: hidden;
  background: transparent;
  border: 2px dashed #94a3b8;
}
.field-box[data-type="static_image"].has-image {
  border-color: rgba(14,165,233,0.35);
}
.field-box[data-type="static_image"] .static-image-placeholder {
  pointer-events: none; /* children (button) handle clicks */
}
.field-box[data-type="static_image"] .static-image-placeholder button {
  pointer-events: all;
}
.field-box[data-type="static_image"] .si-change-btn {
  pointer-events: all;
}

.resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  right: -8px;
  bottom: -8px;
  background: #2563eb;
  border: 2px solid #ffffff;
  border-radius: 50%;
  cursor: nwse-resize;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.field-box.selected .resize-handle {
  background: #f97316;
}

/* ===== visual fix 2026-03-29 ===== */

:root{
  --fg-panel-title-size: 1.05rem;
  --fg-button-size: 1rem;
  --fg-topbar-size: 0.98rem;
}

.topbar{
  align-items: center;
}

.topbar .app-title{
  font-size: 1.05rem;
  font-weight: 700;
}

.topbar-left label,
.topbar-left select,
.topbar-left .upload-label,
.topbar-left .page-info,
.topbar-left button{
  font-size: var(--fg-topbar-size);
}

.topbar-left select,
.topbar-left button,
.topbar-left .upload-label{
  min-height: 38px;
  box-sizing: border-box;
}

.layout{
  align-items: flex-start;
}

.toolbar{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.panel{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.panel h2{
  font-size: var(--fg-panel-title-size);
  line-height: 1.2;
}

.panel label,
.panel input,
.panel select,
.panel button,
.button-row button,
.tool-item{
  font-size: var(--fg-button-size);
}

.panel input,
.panel select,
.panel button{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.panel-form-settings{
  width: 100%;
  max-width: 100%;
  direction: rtl;
}

.workspace{
  align-self: flex-start;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.pages-container{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.page-shell:first-child{
  margin-top: 0 !important;
}


/* ===== scroll + sync + pages fix 2026-03-29 ===== */

html, body{
  height: 100%;
  overflow: hidden;
}

body{
  margin: 0;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
}

.layout{
  height: calc(100vh - 68px);
  overflow: hidden;
  align-items: stretch;
}

.toolbar{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 24px;
}

.workspace{
  height: 100%;
  overflow: auto;
}

.pages-container{
  min-height: 100%;
  overflow: visible;
  padding: 0 20px 20px;
  box-sizing: border-box;
}

#formSettingsPanel,
#formSettingsPanel input{
  max-width: 100%;
  box-sizing: border-box;
}


/* ===== QA FIELD STYLE ===== */

.qa-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qa-question {
  font-weight: bold;
  font-size: 14px;
  border-bottom: 1px dashed #ccc;
  padding-bottom: 2px;
}

.qa-answer {
  height: 28px;
  font-size: 14px;
  padding: 4px;
}

/* ===== END QA FIELD ===== */



/* ===== qa field hotfix ===== */
.field-box.qa-field{
  overflow: hidden;
}

.qa-field-inner{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
/* ===== end qa field hotfix ===== */


/* ===== rtl layout fix 2026-03-30 ===== */
.layout{
  direction: rtl;
}

.toolbar{
  order: 0;
}

.workspace{
  order: 1;
}
/* ===== end rtl layout fix ===== */

/* ===== force toolbar right 2026-03-30 ===== */

.layout{
  display: flex !important;
  flex-direction: row !important;
  direction: rtl !important;
}

.toolbar{
  order: 1 !important;
  flex: 0 0 340px !important;
  width: 340px !important;
  max-width: 340px !important;
  min-width: 340px !important;
}

.workspace{
  order: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html[dir="rtl"] .layout{
  flex-direction: row !important;
}

/* ===== end force toolbar right ===== */

/* ===== force toolbar right 2026-03-30 ===== */

.layout{
  display: flex !important;
  flex-direction: row !important;
  direction: rtl !important;
}

.toolbar{
  order: 1 !important;
  flex: 0 0 340px !important;
  width: 340px !important;
  max-width: 340px !important;
  min-width: 340px !important;
}

.workspace{
  order: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html[dir="rtl"] .layout{
  flex-direction: row !important;
}

/* ===== end force toolbar right ===== */

/* ===== force toolbar right with grid 2026-03-30 ===== */

.layout{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  direction: ltr !important;
  align-items: start !important;
}

.workspace{
  grid-column: 1 !important;
  min-width: 0 !important;
}

.toolbar{
  grid-column: 2 !important;
  width: 340px !important;
  max-width: 340px !important;
  min-width: 340px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* ===== end force toolbar right with grid ===== */


/* ===== qa real field 2026-03-30 ===== */
.qa-field-inner{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.qa-question-line{
  font-weight: 700;
}

.qa-answer-line{
  white-space: pre-wrap;
}
/* ===== end qa real field ===== */


/* ===== textarea field 2026-03-31 ===== */
.textarea-field-inner{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.textarea-placeholder-line{
  white-space: pre-wrap;
}
/* ===== end textarea field ===== */


/* ===== choice field 2026-03-31 ===== */
.choice-field-inner{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.choice-options-wrap{
  width: 100%;
}

.choice-option-line{
  width: 100%;
}
/* ===== end choice field ===== */


/* ===== choice options builder 2026-03-31 ===== */
.choice-options-builder{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-option-editor-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fafafa;
}

.choice-option-editor-check{
  display: flex;
  align-items: center;
  gap: 8px;
}

.choice-option-editor-delete{
  width: auto;
}
/* ===== end choice options builder ===== */


/* ===== choice layout + other 2026-03-31 ===== */
.choice-other-toggle-label{
  display: inline-block;
}

.choice-option-detail{
  white-space: pre-wrap;
}
/* ===== end choice layout + other ===== */

/* ===== choice layout grid fix 2026-03-31 ===== */

.choice-options-wrap.layout-1col{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 6px;
}

.choice-options-wrap.layout-2col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 14px;
  row-gap: 6px;
}

.choice-options-wrap.layout-3col{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: 14px;
  row-gap: 6px;
}

.choice-options-wrap.layout-flow{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.choice-options-wrap.layout-full{
  display: grid;
  grid-template-columns: 1fr;
}

.choice-option-line{
  width: 100%;
}

/* ===== end choice layout grid fix ===== */


/* ===== choice layout distinguish 2026-03-31 ===== */

.choice-options-wrap.layout-1col .choice-option-line{
  width: 100%;
}

.choice-options-wrap.layout-flow{
  align-items: flex-start;
}

.choice-options-wrap.layout-flow .choice-option-line{
  width: auto;
  min-width: 140px;
  max-width: 220px;
  flex: 0 0 auto;
}

.choice-options-wrap.layout-full .choice-option-line{
  width: 100%;
}

.choice-options-wrap.layout-full .choice-option-detail{
  margin-top: 6px;
}

/* ===== end choice layout distinguish ===== */



/* ===== block1 language engine ===== */
html[dir="rtl"] .topbar,
html[dir="rtl"] .toolbar,
html[dir="rtl"] .panel,
html[dir="rtl"] .panel label,
html[dir="rtl"] .panel input,
html[dir="rtl"] .panel select,
html[dir="rtl"] .panel button {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .topbar,
html[dir="ltr"] .toolbar,
html[dir="ltr"] .panel,
html[dir="ltr"] .panel label,
html[dir="ltr"] .panel input,
html[dir="ltr"] .panel select,
html[dir="ltr"] .panel button {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .layout {
  grid-template-columns: 340px minmax(0, 1fr) !important;
}

html[dir="ltr"] .workspace {
  grid-column: 2 !important;
}

html[dir="ltr"] .toolbar {
  grid-column: 1 !important;
}

html[dir="rtl"] .field-box {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .field-box {
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] .choice-option-line {
  flex-direction: row-reverse;
  text-align: right;
}

html[dir="ltr"] .choice-option-line {
  flex-direction: row;
  text-align: left;
}

html[dir="rtl"] .qa-field-inner,
html[dir="rtl"] .textarea-field-inner,
html[dir="rtl"] .choice-field-inner {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] .qa-field-inner,
html[dir="ltr"] .textarea-field-inner,
html[dir="ltr"] .choice-field-inner {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .resize-handle {
  left: -8px;
  right: auto;
  cursor: nesw-resize;
}
/* ===== end block1 language engine ===== */

/* ===== choice rtl final css fix ===== */
.field-box[data-type="choice"][data-dir="rtl"] .choice-options-wrap,
html[dir="rtl"] .field-box[data-type="choice"] .choice-options-wrap {
  direction: rtl !important;
}

.field-box[data-type="choice"][data-dir="rtl"] .choice-option-line,
html[dir="rtl"] .field-box[data-type="choice"] .choice-option-line {
  direction: rtl !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

.field-box[data-type="choice"][data-dir="rtl"] .choice-option-text,
html[dir="rtl"] .field-box[data-type="choice"] .choice-option-text {
  direction: rtl !important;
  text-align: right !important;
}

.field-box[data-type="choice"][data-dir="rtl"] .choice-option-box,
html[dir="rtl"] .field-box[data-type="choice"] .choice-option-box {
  order: 0 !important;
}

.field-box[data-type="choice"][data-dir="rtl"] .choice-option-text,
html[dir="rtl"] .field-box[data-type="choice"] .choice-option-text {
  order: 1 !important;
}

.field-box[data-type="choice"][data-dir="rtl"] .choice-option-detail,
html[dir="rtl"] .field-box[data-type="choice"] .choice-option-detail {
  direction: rtl !important;
  text-align: right !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 22px !important;
}

.field-box[data-type="choice"][data-dir="ltr"] .choice-option-line,
html[dir="ltr"] .field-box[data-type="choice"] .choice-option-line {
  direction: ltr !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.field-box[data-type="choice"][data-dir="ltr"] .choice-option-detail,
html[dir="ltr"] .field-box[data-type="choice"] .choice-option-detail {
  margin-inline-start: 22px !important;
  margin-inline-end: 0 !important;
}
/* ===== end choice rtl final css fix ===== */


/* ===== choice layout language fix ===== */

/* עברית — עיגול מימין, טקסט משמאל */
.field-box[data-type="choice"][dir="rtl"] .choice-option-line {
  display: flex;
  flex-direction: row-reverse !important;
  justify-content: flex-start;
  text-align: right;
}

.field-box[data-type="choice"][dir="rtl"] .choice-option-text {
  text-align: right !important;
  direction: rtl !important;
}

.field-box[data-type="choice"][dir="rtl"] .choice-option-detail {
  margin-inline-start: 0 !important;
  margin-inline-end: 22px !important;
  text-align: right !important;
}

/* אנגלית — עיגול משמאל, טקסט מימין */
.field-box[data-type="choice"][dir="ltr"] .choice-option-line {
  display: flex;
  flex-direction: row !important;
  justify-content: flex-start;
  text-align: left;
}

.field-box[data-type="choice"][dir="ltr"] .choice-option-text {
  text-align: left !important;
  direction: ltr !important;
}

.field-box[data-type="choice"][dir="ltr"] .choice-option-detail {
  margin-inline-start: 22px !important;
  margin-inline-end: 0 !important;
  text-align: left !important;
}

/* ===== end choice layout language fix ===== */


/* ===== choice RTL/LTR TRUE FIX ===== */

/* wrapper respects direction */
.field-box[data-type="choice"] .choice-options-wrap {
  direction: inherit;
}

/* base row */
.field-box[data-type="choice"] .choice-option-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* RTL — box on RIGHT */
.field-box[data-type="choice"][dir="rtl"] .choice-option-line {
  flex-direction: row-reverse !important;
  justify-content: flex-start;
  text-align: right;
}

/* LTR — box on LEFT */
.field-box[data-type="choice"][dir="ltr"] .choice-option-line {
  flex-direction: row !important;
  justify-content: flex-start;
  text-align: left;
}

/* text alignment */
.field-box[data-type="choice"][dir="rtl"] .choice-option-text {
  text-align: right;
}

.field-box[data-type="choice"][dir="ltr"] .choice-option-text {
  text-align: left;
}

/* detail alignment */
.field-box[data-type="choice"][dir="rtl"] .choice-option-detail {
  margin-inline-start: 0;
  margin-inline-end: 22px;
  text-align: right;
}

.field-box[data-type="choice"][dir="ltr"] .choice-option-detail {
  margin-inline-start: 22px;
  margin-inline-end: 0;
  text-align: left;
}

/* ===== end choice RTL/LTR TRUE FIX ===== */


/* ===== choice dir override by field dir ===== */

/* force by actual field dir, not by html dir */
.field-box[data-type="choice"][dir="rtl"] .choice-option-line {
  direction: rtl !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

.field-box[data-type="choice"][dir="rtl"] .choice-option-text,
.field-box[data-type="choice"][dir="rtl"] .choice-option-detail,
.field-box[data-type="choice"][dir="rtl"] .choice-question-line,
.field-box[data-type="choice"][dir="rtl"] .choice-options-wrap {
  direction: rtl !important;
  text-align: right !important;
}

.field-box[data-type="choice"][dir="rtl"] .choice-option-detail {
  margin-inline-start: 0 !important;
  margin-inline-end: 22px !important;
}

/* ltr must beat old html[dir="rtl"] rules */
.field-box[data-type="choice"][dir="ltr"] .choice-option-line {
  direction: ltr !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.field-box[data-type="choice"][dir="ltr"] .choice-option-text,
.field-box[data-type="choice"][dir="ltr"] .choice-option-detail,
.field-box[data-type="choice"][dir="ltr"] .choice-question-line,
.field-box[data-type="choice"][dir="ltr"] .choice-options-wrap {
  direction: ltr !important;
  text-align: left !important;
}

.field-box[data-type="choice"][dir="ltr"] .choice-option-detail {
  margin-inline-start: 22px !important;
  margin-inline-end: 0 !important;
}

/* explicit ordering */
.field-box[data-type="choice"][dir="rtl"] .choice-option-box {
  order: 2 !important;
}
.field-box[data-type="choice"][dir="rtl"] .choice-option-text {
  order: 1 !important;
}

.field-box[data-type="choice"][dir="ltr"] .choice-option-box {
  order: 1 !important;
}
.field-box[data-type="choice"][dir="ltr"] .choice-option-text {
  order: 2 !important;
}

/* ===== end choice dir override by field dir ===== */


/* ===== choice exact override against html[dir="rtl"] ===== */

/* English field inside app that still keeps html[dir="rtl"] */
html[dir="rtl"] .field-box[data-type="choice"][dir="ltr"] .choice-options-wrap,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="ltr"] .choice-options-wrap {
  direction: ltr !important;
  text-align: left !important;
}

html[dir="rtl"] .field-box[data-type="choice"][dir="ltr"] .choice-question-line,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="ltr"] .choice-question-line,
html[dir="rtl"] .field-box[data-type="choice"][dir="ltr"] .choice-option-text,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="ltr"] .choice-option-text,
html[dir="rtl"] .field-box[data-type="choice"][dir="ltr"] .choice-option-detail,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="ltr"] .choice-option-detail {
  direction: ltr !important;
  text-align: left !important;
}

html[dir="rtl"] .field-box[data-type="choice"][dir="ltr"] .choice-option-line,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="ltr"] .choice-option-line {
  direction: ltr !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

html[dir="rtl"] .field-box[data-type="choice"][dir="ltr"] .choice-option-box,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="ltr"] .choice-option-box {
  order: 1 !important;
}

html[dir="rtl"] .field-box[data-type="choice"][dir="ltr"] .choice-option-text,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="ltr"] .choice-option-text {
  order: 2 !important;
}

html[dir="rtl"] .field-box[data-type="choice"][dir="ltr"] .choice-option-detail,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="ltr"] .choice-option-detail {
  margin-inline-start: 22px !important;
  margin-inline-end: 0 !important;
}

/* Hebrew field */
html[dir="rtl"] .field-box[data-type="choice"][dir="rtl"] .choice-options-wrap,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="rtl"] .choice-options-wrap {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .field-box[data-type="choice"][dir="rtl"] .choice-question-line,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="rtl"] .choice-question-line,
html[dir="rtl"] .field-box[data-type="choice"][dir="rtl"] .choice-option-text,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="rtl"] .choice-option-text,
html[dir="rtl"] .field-box[data-type="choice"][dir="rtl"] .choice-option-detail,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="rtl"] .choice-option-detail {
  direction: rtl !important;
  text-align: right !important;
}

html[dir="rtl"] .field-box[data-type="choice"][dir="rtl"] .choice-option-line,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="rtl"] .choice-option-line {
  direction: rtl !important;
  flex-direction: row-reverse !important;
  justify-content: flex-end !important;
  text-align: right !important;
}

html[dir="rtl"] .field-box[data-type="choice"][dir="rtl"] .choice-option-box,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="rtl"] .choice-option-box {
  order: 2 !important;
}

html[dir="rtl"] .field-box[data-type="choice"][dir="rtl"] .choice-option-text,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="rtl"] .choice-option-text {
  order: 1 !important;
}

html[dir="rtl"] .field-box[data-type="choice"][dir="rtl"] .choice-option-detail,
html[dir="rtl"] .field-box[data-type="choice"][data-dir="rtl"] .choice-option-detail {
  margin-inline-start: 0 !important;
  margin-inline-end: 22px !important;
}

/* ===== end choice exact override against html[dir="rtl"] ===== */


/* ===== required runtime patch styles ===== */
.required-badge {
  position: absolute;
  top: -10px;
  inset-inline-start: -4px;
  background: #b91c1c;
  color: #ffffff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  z-index: 6;
  white-space: nowrap;
}

.field-box[data-required="1"] {
  box-shadow: inset 0 0 0 1px rgba(185,28,28,0.22);
}
/* ===== end required runtime patch styles ===== */


/* ===== required runtime patch styles ===== */
.required-badge {
  position: absolute;
  top: -10px;
  inset-inline-start: -4px;
  background: #b91c1c;
  color: #ffffff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  z-index: 6;
  white-space: nowrap;
}

.field-box[data-required="1"] {
  box-shadow: inset 0 0 0 1px rgba(185,28,28,0.22);
}
/* ===== end required runtime patch styles ===== */



/* ===== fixed form link ===== */

.topbar-fixed-link {
  display: flex;
  flex-direction: column;
  margin-inline-start: 16px;
  min-width: 320px;
}

.fixed-link-row {
  display: flex;
  gap: 6px;
}

#fixedFormLinkInput {
  flex: 1;
  padding: 4px 6px;
  font-size: 12px;
}

#copyFixedFormLinkBtn {
  padding: 4px 8px;
  cursor: pointer;
}

/* ===== end fixed link ===== */


/* ===== client mode ===== */
body.client-mode {
  background: #f5f5f5;
}

body.client-mode .workspace {
  max-width: 1100px;
  margin: 0 auto;
}

body.client-mode .page-overlay {
  margin-inline: auto;
}
/* ===== end client mode ===== */


/* ===============================
   CLIENT MODE VISUAL POLISH
=============================== */

/* קאנבס לבן חלק */
body.client-mode {
  background: #ffffff;
}

/* הסרת תחושת "דף" */
body.client-mode .page-overlay {
  background: #ffffff;
  box-shadow: none;
  border: none;
  margin-bottom: 32px;
}

/* גלילה רציפה */
body.client-mode .workspace {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 0 40px;
}

/* ביטול resize ו-drag */
body.client-mode .resize-handle,
body.client-mode .field-resizer,
body.client-mode .drag-handle {
  display: none !important;
}

body.client-mode .field-box {
  cursor: default !important;
}

/* מסגרת תכלת לשדות */
body.client-mode .field-box {
  border: 2px solid #7dd3fc;
  border-radius: 6px;
  background: #ffffff;
}

/* שדות input אמיתיים */
body.client-mode input,
body.client-mode textarea,
body.client-mode select {
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
  padding: 6px;
  background: transparent;
  text-align: inherit;
}

/* כפתור שלח */
#clientSubmitBtn {
  background: #7f1d1d;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  padding: 14px 36px;
  cursor: pointer;
  transition: 0.2s;
}

#clientSubmitBtn:hover {
  background: #991b1b;
}

/* ביטול מצב selected */
body.client-mode .field-box.selected {
  outline: none !important;
}


/* ===== client text runtime fix ===== */
body.client-mode .client-live-text-input {
  color: #111827;
}

body.client-mode .client-live-text-input::placeholder {
  color: #94a3b8;
  opacity: 1;
}
/* ===== end client text runtime fix ===== */


/* ===== client textarea runtime fix ===== */
body.client-mode .client-live-textarea {
  color: #111827;
}

body.client-mode .client-live-textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}
/* ===== end client textarea runtime fix ===== */


/* ===============================
   CLIENT MODE LAYOUT FIX
=============================== */

/* ביטול grid של builder */
body.client-mode .layout {
  display: block !important;
}

/* הסרגלים לא תופסים מקום */
body.client-mode .right-panel,
body.client-mode .side-panel,
body.client-mode .sidebar,
body.client-mode .toolbar,
body.client-mode .folder-panel {
  display: none !important;
  width: 0 !important;
  flex: 0 !important;
}

/* מרכז קאנבאס */
body.client-mode .workspace {
  margin: 0 auto !important;
  max-width: 900px !important;
  width: 100% !important;
  padding: 24px 0 40px !important;
}

/* גלילה בין עמודים */
body.client-mode .page-container {
  display: block !important;
}

body.client-mode .page-overlay {
  margin-bottom: 40px !important;
}

/* ביטול ניווט עמודים */
body.client-mode .page-nav,
body.client-mode .page-controls,
body.client-mode .page-switcher {
  display: none !important;
}

/* רק גלילה */
body.client-mode {
  overflow-y: auto;
}

/* כפתור שלח במרכז */
#clientSubmitWrap {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* כפתור בורדו */
#clientSubmitBtn {
  background: #7f1d1d;
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 8px;
  padding: 14px 36px;
  border: none;
  cursor: pointer;
}

#clientSubmitBtn:hover {
  background: #991b1b;
}