/* ============================================================================
   AliothPress Page Builder — Editor UI
   Full-screen visual editor with sidebar panel + canvas + drag-and-drop.
   ============================================================================ */

/* --- Light theme (default) — harmonized with admin.css light --- */
:root {
  --pb-bg:          #f8fafc;
  --pb-surface:     #ffffff;
  --pb-surface-alt: #f1f5f9;
  --pb-border:      #e2e8f0;
  --pb-border-strong:#cbd5e1;
  --pb-text:        #1e293b;
  --pb-text-dim:    #475569;
  --pb-text-muted:  #64748b;
  --pb-primary:     #5c7a9e;
  --pb-primary-hover:#4e6b8c;
  --pb-primary-bg:  rgba(92,122,158,0.08);
  --pb-primary-text:#ffffff;
  --pb-danger:      #8c6068;
  --pb-danger-bg:   rgba(140,96,104,0.06);
  --pb-success:     #16a34a;
  --pb-success-bg:  rgba(22,163,74,0.06);
  --pb-warning:     #d97706;
  --pb-warning-bg:  rgba(217,119,6,0.06);
  --pb-focus:       #5c7a9e;
  --pb-shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
  --pb-shadow-md:   0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --pb-shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --pb-radius:      8px;
  --pb-radius-sm:   6px;
  --pb-sidebar-w:   280px;
  --pb-panel-w:     300px;
  --pb-topbar-h:    48px;
  --pb-font:        'Inter', system-ui, -apple-system, sans-serif;
  /* Section block preview background — overridden inline per-section by the
     builder preview when the user configures a color/gradient/image.
     Default falls back to the current theme's footer background, matching
     what .ap-section uses on the public site (via theme_css injected into
     the page). This keeps the preview visually consistent with the real
     rendering across all 15 themes and their light/dark modes. */
  --pb-section-bg:     var(--ap-footer-bg, var(--pb-surface));
  --pb-section-bg-dark:var(--ap-footer-bg, var(--pb-surface));
  color-scheme: light;
}

/* --- Dark theme — harmonized with admin.css dark --- */
body[data-theme="dark"] {
  --pb-bg:          #0f1117;
  --pb-surface:     #1a1c25;
  --pb-surface-alt: #22252f;
  --pb-border:      #2d3044;
  --pb-border-strong:rgba(255,255,255,0.12);
  --pb-text:        #e2e8f0;
  --pb-text-dim:    #94a3b8;
  --pb-text-muted:  #64748b;
  --pb-primary:     #a8b4d0;
  --pb-primary-hover:#b8c4dc;
  --pb-primary-bg:  rgba(168,180,208,0.12);
  --pb-primary-text:#0f1117;
  --pb-danger:      #b07878;
  --pb-danger-bg:   rgba(176,120,120,0.1);
  --pb-success:     #34d399;
  --pb-success-bg:  rgba(52,211,153,0.1);
  --pb-warning:     #fbbf24;
  --pb-warning-bg:  rgba(251,191,36,0.1);
  --pb-focus:       #a8b4d0;
  --pb-shadow-sm:   0 1px 2px rgba(0,0,0,0.2);
  --pb-shadow-md:   0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --pb-shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.2);
  --pb-section-bg:     var(--ap-footer-bg, var(--pb-surface));
  --pb-section-bg-dark:var(--ap-footer-bg, var(--pb-surface));
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--pb-font);
  background: var(--pb-bg);
  color: var(--pb-text);
  overflow: hidden;
  height: 100vh;
}

/* ======== TOP BAR ======== */
.pb-topbar {
  height: var(--pb-topbar-h);
  background: var(--pb-surface);
  border-bottom: 1px solid var(--pb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

.pb-topbar__left,
.pb-topbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pb-topbar__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pb-text);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-topbar__sep {
  color: var(--pb-text-muted);
  font-size: 13px;
}

.pb-topbar__page-title {
  font-size: 13px;
  color: var(--pb-text-dim);
}

.pb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--pb-font);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
}

.pb-btn--ghost {
  background: transparent;
  color: var(--pb-text-dim);
  border-color: transparent;
}
.pb-btn--ghost:hover {
  background: var(--pb-surface-alt);
  color: var(--pb-text);
}

.pb-btn--outline {
  background: transparent;
  color: var(--pb-text-dim);
  border-color: var(--pb-border);
}
.pb-btn--outline:hover {
  color: var(--pb-text);
  border-color: var(--pb-border-strong);
}

.pb-btn--primary {
  background: var(--pb-primary);
  color: var(--pb-primary-text);
  border-color: var(--pb-primary);
}
.pb-btn--primary:hover {
  background: var(--pb-primary-hover);
}

.pb-btn--danger {
  background: var(--pb-danger-bg);
  color: var(--pb-danger);
  border-color: var(--pb-danger);
}
.pb-btn--danger:hover {
  background: var(--pb-danger);
  color: var(--pb-primary-text);
}

.pb-btn--sm {
  padding: 4px 8px;
  font-size: 12px;
}

/* ======== LAYOUT: sidebar + canvas + panel ======== */
.pb-layout {
  display: flex;
  height: calc(100vh - var(--pb-topbar-h));
  margin-top: var(--pb-topbar-h);
}

/* ======== LEFT SIDEBAR — Block palette ======== */
.pb-sidebar {
  width: var(--pb-sidebar-w);
  background: var(--pb-surface);
  border-right: 1px solid var(--pb-border);
  overflow-y: auto;
  /* Same reserved gutter as canvas/panel — palette width stays constant. */
  scrollbar-gutter: stable;
  flex-shrink: 0;
}

.pb-sidebar__section {
  padding: 12px;
}

.pb-sidebar__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pb-text-muted);
  margin-bottom: 8px;
}

.pb-block-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.pb-block-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 4px;
  background: var(--pb-surface-alt);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius);
  cursor: grab;
  color: var(--pb-text-dim);
  font-size: 11px;
  font-family: var(--pb-font);
  transition: all 0.15s;
  text-align: center;
  line-height: 1.2;
}

.pb-block-btn:hover {
  background: var(--pb-primary-bg);
  border-color: var(--pb-primary);
  color: var(--pb-primary);
}

.pb-block-btn:active {
  cursor: grabbing;
}

.pb-block-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ======== CANVAS — Center area ======== */
.pb-canvas {
  flex: 1;
  overflow-y: auto;
  /* Reserve the scrollbar gutter: without it, the centered canvas content
     shifts horizontally the moment the page grows tall enough to scroll
     (adding a block, opening an accordion, etc.). */
  scrollbar-gutter: stable;
  padding: 32px;
  background: var(--ap-color-bg, var(--pb-bg));
}

.pb-canvas__inner {
  max-width: 820px;
  margin: 0 auto;
  min-height: 400px;
  margin-bottom: 300px;
}

/* Drop zone when canvas is empty */
.pb-canvas__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  border: 2px dashed var(--pb-border);
  border-radius: 12px;
  color: var(--pb-text-muted);
  font-size: 15px;
  gap: 12px;
  transition: all 0.2s;
}

.pb-canvas__empty svg {
  width: 40px;
  height: 40px;
  opacity: 0.4;
}

.pb-canvas__empty:hover,
.pb-canvas--drag-over .pb-canvas__empty {
  border-color: var(--pb-primary);
  color: var(--pb-text-dim);
  background: var(--pb-primary-bg);
}

/* ======== BLOCK ITEM in canvas ======== */
.pb-item {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--pb-radius);
  margin-bottom: 2px;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: default;
}

.pb-item:hover {
  border-color: var(--pb-primary-bg);
}

.pb-item.is-selected {
  border-color: var(--pb-primary);
  box-shadow: 0 0 0 1px var(--pb-primary);
}

.pb-item__toolbar {
  position: absolute;
  top: -1px;
  right: -1px;
  display: none;
  align-items: center;
  gap: 2px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: 0 var(--pb-radius) 0 var(--pb-radius);
  padding: 2px;
  z-index: 10;
}

.pb-item:hover .pb-item__toolbar,
.pb-item.is-selected .pb-item__toolbar {
  display: flex;
}

.pb-item__toolbar button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--pb-text-dim);
  cursor: pointer;
  font-family: var(--pb-font);
}

.pb-item__toolbar button:hover {
  background: var(--pb-surface-alt);
  color: var(--pb-text);
}

.pb-item__toolbar button.pb-item__delete:hover {
  background: var(--pb-danger-bg);
  color: var(--pb-danger);
}

.pb-item__toolbar svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pb-item__drag-handle {
  cursor: grab;
}
.pb-item__drag-handle:active {
  cursor: grabbing;
}

.pb-item__content {
  padding: 36px 16px 16px;
  min-height: 40px;
  border-radius: var(--pb-radius-sm);
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  transition: background 0.15s;
}

.pb-item:hover .pb-item__content {
  background: var(--pb-surface);
  border-color: var(--pb-primary-bg);
}

.pb-item.is-selected .pb-item__content {
  border-color: var(--pb-primary);
}

/* Block type label */
.pb-item__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--pb-text-muted);
  position: absolute;
  top: -1px;
  left: 8px;
  background: var(--pb-surface);
  padding: 1px 6px;
  border-radius: 0 0 4px 4px;
  border: 1px solid var(--pb-border);
  border-top: none;
  display: none;
}

.pb-item:hover .pb-item__label,
.pb-item.is-selected .pb-item__label {
  display: block;
}

/* ======== DROP INDICATOR ======== */
.pb-drop-indicator {
  height: 3px;
  background: var(--pb-primary);
  border-radius: 2px;
  margin: 2px 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.pb-drop-indicator.is-active {
  opacity: 1;
}

/* ======== CANVAS INSERTER — "+" button between blocks ======== */
.pb-inserter {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  margin: -2px 0;
}
.pb-inserter:hover {
  opacity: 1;
}
.pb-inserter__line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px dashed var(--pb-border);
}
.pb-inserter__btn {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pb-surface);
  color: var(--pb-text-muted);
  border: 1px dashed var(--pb-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pb-inserter__btn:hover {
  border-color: var(--pb-primary);
  color: var(--pb-primary);
  background: var(--pb-primary-bg);
}
.pb-inserter--sm {
  height: 16px;
  margin: -1px 0;
}
.pb-inserter--sm .pb-inserter__btn {
  width: 16px;
  height: 16px;
}

/* ======== RIGHT PANEL — Block settings ======== */
/* The panel column is ALWAYS reserved on desktop. Toggling display:none
   used to resize the canvas by 300px every time a block was selected or
   deselected — the whole canvas (and this sidebar) visibly jumped.
   When no block is selected we show a neutral empty state instead of
   collapsing the column. Mobile (<=640px) keeps the overlay behaviour. */
.pb-panel {
  width: var(--pb-panel-w);
  background: var(--pb-surface);
  border-left: 1px solid var(--pb-border);
  overflow-y: auto;
  /* Blocks have settings forms of very different heights. Without a
     reserved gutter the scrollbar pops in/out when switching blocks and
     every input changes width — the panel looks "jumpy". */
  scrollbar-gutter: stable;
  flex-shrink: 0;
  display: block;
}

.pb-panel.is-open {
  display: block;
}

/* No block selected: hide the settings chrome, show the hint */
.pb-panel:not(.is-open) .pb-panel__header,
.pb-panel:not(.is-open) .pb-panel__body {
  display: none;
}

.pb-panel__empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  /* Horizontal padding mirrors .pb-panel__body (16px) so the hint aligns
     with the rest of the panel content instead of hugging the edge. */
  padding: 32px 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pb-text-muted);
}
.pb-panel__empty svg {
  width: 20px;
  height: 20px;
  opacity: 0.4;
  flex-shrink: 0;
}
.pb-panel:not(.is-open) .pb-panel__empty {
  display: flex;
}

.pb-panel__header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pb-panel__title {
  font-size: 14px;
  font-weight: 600;
}

.pb-panel__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--pb-text-dim);
  cursor: pointer;
}
.pb-panel__close:hover {
  background: var(--pb-surface-alt);
  color: var(--pb-text);
}

.pb-panel__body {
  padding: 16px;
}

/* Form fields in panel */
.pb-field {
  margin-bottom: 16px;
}

.pb-field__label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--pb-text-dim);
  margin-bottom: 6px;
}

.pb-field__input,
.pb-field__select,
.pb-field__textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--pb-surface-alt);
  border: 1px solid var(--pb-border);
  border-radius: 6px;
  color: var(--pb-text);
  font-size: 13px;
  font-family: var(--pb-font);
  outline: none;
  transition: border-color 0.15s;
}

.pb-field__input:focus,
.pb-field__select:focus,
.pb-field__textarea:focus {
  border-color: var(--pb-primary);
}

.pb-field__textarea {
  min-height: 80px;
  resize: vertical;
}

.pb-field__select {
  cursor: pointer;
}

.pb-field__row {
  display: flex;
  gap: 8px;
}

.pb-field__row > * {
  flex: 1;
}

/* Checkbox / toggle */
.pb-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--pb-text-dim);
}

.pb-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--pb-primary);
}

/* ======== TOAST / STATUS ======== */
/* Toast stack (readability rework): messages are separate elements in
   a fixed bottom-center column — a new one stacks, never overwrites.
   The pill look, tokens and transition stay exactly as designed. */
.pb-toasts {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 200;
  pointer-events: none;
  max-width: calc(100vw - 32px);
}

.pb-toast {
  transform: translateY(20px);
  background: var(--pb-surface-alt);
  border: 1px solid var(--pb-border);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--pb-text);
  opacity: 0;
  transition: all 0.3s;
  pointer-events: auto;
}

.pb-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pb-toast--success { border-color: var(--pb-success); }
.pb-toast--error   { border-color: var(--pb-danger); }

/* More button — hidden on desktop, shown on mobile */
.pb-topbar__more {
  display: none;
}

/* Actions container — inline on desktop */
.pb-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ======== RESPONSIVE ======== */
@media (max-width: 900px) {
  .pb-sidebar { width: 220px; }
  .pb-panel   { width: 260px; }
  .pb-block-grid { grid-template-columns: 1fr; }
  .pb-topbar__sep,
  .pb-topbar__page-title {
    display: none;
  }
  .pb-topbar__more {
    display: flex;
  }
  .pb-topbar__actions {
    display: none;
    position: absolute;
    top: var(--pb-topbar-h);
    right: 8px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px;
    background: var(--pb-surface);
    border: 1px solid var(--pb-border);
    border-radius: var(--pb-radius);
    box-shadow: var(--pb-shadow-lg);
    z-index: 101;
  }
  .pb-topbar__actions.is-open {
    display: flex;
  }
  .pb-topbar__actions .pb-btn {
    justify-content: flex-start;
    width: 100%;
  }
  .pb-topbar__actions .pb-theme-badge {
    padding: 6px 14px;
  }
}

@media (max-width: 640px) {
  .pb-sidebar { display: none; }
  /* Overlay mode: here the panel floats OVER the canvas, so reserving the
     column makes no sense — keep the classic show/hide toggle.
     .pb-panel.is-open (higher specificity) still wins with display:block. */
  .pb-panel   { display: none; position: fixed; right: 0; top: var(--pb-topbar-h); bottom: 0; width: 300px; z-index: 50; }
  .pb-topbar__title {
    display: none;
  }
}

/* ======== ACCESSIBILITY — Focus & keyboard nav ======== */
*:focus-visible {
  outline: 2px solid var(--pb-focus);
  outline-offset: 2px;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--pb-focus);
  outline-offset: 1px;
}

.pb-block-btn:focus-visible {
  outline: 2px solid var(--pb-focus);
  outline-offset: -1px;
  background: var(--pb-primary-bg);
  border-color: var(--pb-primary);
  color: var(--pb-primary);
}

/* ======== SLIDESHOW NESTED BLOCKS (hero mode) ======== */
.pb-slide-block:hover .pb-slide-block__toolbar { display: flex !important; }
.pb-slide-block:hover { background: rgba(255,255,255,0.25) !important; }

/* ======== INLINE EDITING ======== */
[contenteditable] {
  outline: none;
  min-height: 1em;
  cursor: text;
}

[contenteditable]:focus {
  box-shadow: inset 0 0 0 2px var(--pb-primary-bg);
  border-radius: 4px;
}

[contenteditable]:empty::before {
  content: attr(data-placeholder);
  color: var(--pb-text-muted);
  pointer-events: none;
}

/* Inline-editable heading in canvas */
.pb-inline-heading {
  margin: 0;
  color: var(--ap-color-text, var(--pb-text));
  font-family: var(--ap-font-heading, var(--pb-font));
  cursor: text;
  border-radius: 4px;
  padding: 2px 4px;
  transition: background 0.15s;
}

.pb-inline-heading:hover {
  background: var(--pb-primary-bg);
}

.pb-inline-heading:focus {
  background: var(--pb-primary-bg);
  box-shadow: inset 0 0 0 2px var(--pb-primary);
}

/* Inline-editable quote text */
.pb-inline-quote {
  border-left: 3px solid var(--ap-color-primary, var(--pb-primary));
  padding-left: 16px;
  color: var(--ap-color-text-secondary, var(--pb-text-dim));
  font-style: italic;
  margin: 0;
  cursor: text;
  border-radius: 0 4px 4px 0;
  padding: 4px 8px 4px 16px;
  transition: background 0.15s;
}

.pb-inline-quote:hover {
  background: var(--pb-primary-bg);
}

.pb-inline-quote:focus {
  background: var(--pb-primary-bg);
  box-shadow: none;
}

/* Rich text preview in canvas (text block) */
.pb-text-preview {
  color: var(--ap-color-text-secondary, var(--pb-text-dim));
  font-size: 14px;
  line-height: 1.6;
  font-family: var(--ap-font-body, var(--pb-font));
  cursor: pointer;
  border-radius: 4px;
  padding: 4px;
  transition: background 0.15s;
}

.pb-text-preview:hover {
  background: var(--pb-primary-bg);
}

/* Click hint for non-editable blocks */
.pb-click-hint {
  opacity: 0;
  font-size: 10px;
  color: var(--pb-text-muted);
  text-align: center;
  padding: 4px;
  transition: opacity 0.15s;
}

.pb-item:hover .pb-click-hint {
  opacity: 1;
}

/* Inline rich text (Text block) */
.pb-inline-text {
  position: relative; /* anchor for the ::before placeholder overlay */
  color: var(--ap-color-text-secondary, var(--pb-text-dim));
  font-size: 14px;
  line-height: 1.6;
  font-family: var(--ap-font-body, var(--pb-font));
  cursor: text;
  border-radius: 6px;
  padding: 10px 12px;
  min-height: 4em;
  transition: background 0.15s;
}

/* True placeholder for rich text: the block content is an empty <p><br></p>
   (needed for correct caret/paragraph behavior), so :empty never matches —
   a JS-toggled class shows the hint instead. It overlays the first line and
   never becomes part of the content, so typing starts on clean text. */
.pb-inline-text.pb-show-placeholder::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  color: var(--pb-text-muted);
  pointer-events: none;
}
.pb-inline-text:hover { background: var(--pb-primary-bg); }
.pb-inline-text:focus { background: var(--pb-primary-bg); box-shadow: inset 0 0 0 2px var(--pb-primary); outline: none; }
.pb-inline-text p { margin: 0 0 0.5em; }
.pb-inline-text p:last-child { margin-bottom: 0; }
.pb-inline-text a { color: var(--ap-color-link, var(--pb-primary)); }
/* Table-cell links: cells are their own contenteditable areas (not
   .pb-inline-text), so without this rule links inside them had NO color
   declaration at all and rendered in the browser's default link color —
   while text-block links next to them showed the theme's. Same variable
   chain as .pb-inline-text a: theme link color from the injected
   theme_css (flips with .pb-canvas--theme-*), admin primary fallback. */
.pb-inline-table [contenteditable] a { color: var(--ap-color-link, var(--pb-primary)); }
.pb-inline-text ul, .pb-inline-text ol { margin: 0 0 0.5em 1.2em; padding: 0; }
.pb-inline-text li { margin-bottom: 0.15em; }

/* Text block toolbar — part of the block, shown on focus.
   IMPORTANT: the toolbar is always laid out (space permanently reserved)
   and only toggled via `visibility`. The old display:none -> flex switch
   inserted ~35px above the text at the moment of the click, shoving the
   line you just clicked out from under the cursor ("jumping editor").
   Do NOT convert this to an absolutely-positioned overlay and do NOT strip
   the reserved space/margins: the overlay would sit under the block's
   hover toolbar (drag/delete ✕, absolute top-right, z-index 10) and both
   would become partially unclickable — especially in narrow columns.
   visibility:hidden also removes the buttons from hit-testing and tab
   order while unfocused, so the invisible strip can't swallow clicks. */
.pb-text-toolbar {
  display: flex;
  /* Wrap in narrow containers (columns): without this the 12-button strip
     (~370px) overflows the block and its right-end buttons float over
     neighbouring content. Wrapping happens at layout time, so the
     reserved-space guarantee above still holds — no jump on focus. */
  flex-wrap: wrap;
  visibility: hidden;
  align-items: center;
  gap: 1px;
  padding: 4px;
  margin-bottom: 6px;
  background: var(--pb-surface-alt);
  border: 1px solid var(--pb-border);
  border-radius: var(--pb-radius-sm);
}
/* Rich zone: toolbar + contenteditable wrapper (text, tabs, accordion) */
.pb-rich-zone { position: relative; }
.pb-rich-zone:focus-within .pb-text-toolbar { visibility: visible; }

/* Tabs in canvas */
.pb-tabs-nav { display: flex; gap: 4px; flex-wrap: wrap; font-size: 13px; border-bottom: 2px solid var(--pb-border); margin-bottom: 0; }
.pb-tabs-btn { padding: 6px 14px; border-radius: 4px 4px 0 0; cursor: text; margin-bottom: -2px; border-bottom: 2px solid transparent; background: var(--pb-surface-alt); color: var(--pb-text-dim); outline: none; min-width: 30px; transition: background 0.15s, color 0.15s; }
.pb-tabs-btn.is-active { background: var(--ap-color-primary, var(--pb-primary)); color: var(--ap-color-text-inverse, var(--pb-primary-text)); border-bottom-color: var(--ap-color-primary, var(--pb-primary)); }
.pb-tab-panel { display: none; }
.pb-tab-panel.is-active { display: block; }

/* Accordion in canvas */
.pb-acc-item { border: 1px solid var(--pb-border); border-radius: 6px; margin-bottom: 6px; overflow: hidden; font-size: 13px; color: var(--ap-color-text-secondary, var(--pb-text-dim)); }
.pb-acc-item__header { padding: 8px 12px; background: var(--pb-surface-alt); display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background 0.15s; }
.pb-acc-item__header:hover { background: var(--pb-primary-bg); }
.pb-acc-item__arrow { color: var(--pb-text-muted); font-size: 11px; transition: transform 0.2s; flex-shrink: 0; display: inline-block; }
.pb-acc-item.is-open .pb-acc-item__arrow { transform: rotate(90deg); }
.pb-acc-item__body { display: none; border-top: 1px solid var(--pb-border); }
.pb-acc-item.is-open .pb-acc-item__body { display: block; }
.pb-text-toolbar__btn {
  width: 28px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 4px;
  color: var(--pb-text-dim); cursor: pointer; padding: 0;
  transition: background 0.1s, color 0.1s;
}
.pb-text-toolbar__btn:hover { background: var(--pb-surface); color: var(--pb-text); }
.pb-text-toolbar__btn.is-active { background: var(--pb-primary-bg); color: var(--pb-primary); }
.pb-text-toolbar__btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pb-text-toolbar__sep { width: 1px; height: 16px; background: var(--pb-border); margin: 0 3px; flex-shrink: 0; }

/* Sidebar hint for text block */
.pb-text-canvas-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--pb-primary-bg); border: 1px solid var(--pb-primary);
  border-radius: 6px; font-size: 12px; color: var(--pb-text-dim);
}
.pb-text-canvas-hint svg { flex-shrink: 0; color: var(--pb-primary); }

/* Inline input fields (Video URL, Audio, etc.) */
.pb-inline-input {
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--pb-border);
  border-radius: 4px;
  color: var(--pb-text);
  font-size: 13px;
  font-family: var(--pb-font);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.pb-inline-input:hover { border-color: var(--pb-primary-bg); }
.pb-inline-input:focus { border-color: var(--pb-primary); background: var(--pb-primary-bg); }
.pb-inline-input::placeholder { color: var(--pb-text-muted); }

/* Inline textarea (HTML, Code blocks) */
.pb-inline-textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--pb-surface-alt);
  border: 1px solid var(--pb-border);
  border-radius: 6px;
  color: var(--pb-text-dim);
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  line-height: 1.5;
  resize: vertical;
  min-height: 60px;
  max-height: 200px;
  outline: none;
  transition: border-color 0.15s;
  margin: 0;
  display: block;
}
.pb-inline-textarea:focus { border-color: var(--pb-primary); }

/* Inline editable accordion titles */
.pb-inline-acc-title {
  cursor: text;
  flex: 1;
  padding: 2px 4px;
  border-radius: 3px;
  outline: none;
  min-height: 1em;
  transition: background 0.15s;
}
.pb-inline-acc-title:hover { background: rgba(0,0,0,0.04); }
.pb-inline-acc-title:focus { background: var(--pb-primary-bg); box-shadow: inset 0 0 0 1px var(--pb-primary); }

/* Inline table editing */
.pb-inline-table [contenteditable] {
  min-height: 1.4em;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--pb-text);
  font-size: 12px;
  font-family: var(--pb-font);
  outline: none;
  overflow-wrap: break-word;
  word-break: normal;
}
.pb-inline-table [contenteditable]:focus { background: var(--pb-primary-bg); }
.pb-inline-table th [contenteditable] { font-weight: 400; font-size: 14px; }
.pb-inline-table [contenteditable]:empty::before { content: attr(data-placeholder); color: var(--pb-text-muted); pointer-events: none; }

/* Table symbol picker — same reserved-space pattern as .pb-text-toolbar:
   both bars keep their layout slot and only fade in via visibility,
   so clicking a cell doesn't shove the table downward. */
.pb-table-symbols { display: flex; visibility: hidden; align-items: center; gap: 2px; padding: 4px 6px; background: var(--pb-surface); border: 1px solid var(--pb-border); border-radius: var(--pb-radius-sm); margin-bottom: 4px; box-shadow: var(--pb-shadow-sm); }
.pb-inline-table:focus-within .pb-table-symbols { visibility: visible; }
.pb-text-toolbar--compact { margin-bottom: 2px; }
.pb-inline-table:focus-within .pb-text-toolbar--compact { visibility: visible; }
.pb-table-symbols__btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 15px; padding: 0; transition: background 0.1s, border-color 0.1s; }
.pb-table-symbols__btn:hover { background: var(--pb-surface-alt); border-color: var(--pb-border); }
.pb-table-symbols__sep { width: 1px; height: 16px; background: var(--pb-border); margin: 0 2px; flex-shrink: 0; }

/* Button inline edit */
.pb-inline-btn {
  cursor: text;
  outline: none;
  min-width: 40px;
}
.pb-inline-btn:focus { box-shadow: 0 0 0 2px var(--pb-primary); }

/* ======== COLUMNS DROP ZONES ======== */
.pb-col-zone {
  flex: 1;
  min-width: 0;
  min-height: 60px;
  border: 1px dashed var(--pb-border);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s;
}

.pb-col-zone:hover {
  border-color: var(--pb-primary-bg);
}

.pb-col-zone.drag-over {
  border-color: var(--pb-primary);
  background: var(--pb-primary-bg);
}

.pb-col-zone__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--pb-text-muted);
  font-size: 11px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
}

.pb-col-zone__empty:hover {
  background: var(--pb-surface-alt);
  color: var(--pb-text-dim);
}

/* Nested block inside column */
.pb-col-block {
  position: relative;
  border: 1px solid transparent;
  border-radius: 4px;
  /* Top band (30px) reserved for the absolute hover toolbar (22px buttons
     at top:2px → bottom edge ~26px). Mirrors .pb-item__content, which
     reserves 36px for its 28px toolbar. Without this band the hover
     controls land on top of the in-flow .pb-text-toolbar of nested text
     blocks (and on the first line of any nested content). */
  padding: 30px 8px 8px;
  cursor: default;
  transition: border-color 0.15s;
}

.pb-col-block:hover {
  border-color: var(--pb-primary-bg);
}

.pb-col-block__toolbar {
  position: absolute;
  top: 2px;
  right: 2px;
  display: none;
  gap: 2px;
  z-index: 10;
}

.pb-col-block:hover .pb-col-block__toolbar {
  display: flex;
}

.pb-col-block__toolbar button {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: 3px;
  color: var(--pb-text-dim);
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}

.pb-col-block__toolbar button:hover {
  background: var(--pb-surface-alt);
  color: var(--pb-text);
}

.pb-col-block__toolbar button.pb-col-block__delete:hover {
  background: var(--pb-danger-bg);
  color: var(--pb-danger);
}

.pb-col-block__toolbar svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Add block button inside column */
.pb-col-add {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px dashed var(--pb-border);
  border-radius: 4px;
  color: var(--pb-text-muted);
  font-size: 16px;
  cursor: pointer;
  background: none;
  width: 100%;
  font-family: var(--pb-font);
  transition: all 0.15s;
}

.pb-col-add:hover {
  border-color: var(--pb-primary);
  color: var(--pb-primary);
  background: var(--pb-primary-bg);
}

/* Column block type picker dropdown */
.pb-col-picker {
  position: absolute;
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: 8px;
  padding: 8px;
  z-index: 50;
  box-shadow: var(--pb-shadow-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  min-width: 200px;
}

.pb-col-picker__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--pb-text-dim);
  font-size: 11px;
  font-family: var(--pb-font);
  cursor: pointer;
  transition: all 0.1s;
}

.pb-col-picker__btn:hover {
  background: var(--pb-primary-bg);
  color: var(--pb-primary);
}

.pb-col-picker__btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ======== AI MODAL in Builder ======== */
.pb-ai-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.pb-ai-overlay.is-open { opacity: 1; pointer-events: auto; }

.pb-ai-modal {
  background: var(--pb-surface); border-radius: 16px; width: 560px; max-width: 95vw;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: var(--pb-shadow-lg); border: 1px solid var(--pb-border);
  transform: translateY(20px); transition: transform 0.2s;
}
.pb-ai-overlay.is-open .pb-ai-modal { transform: translateY(0); }

.pb-ai-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--pb-border);
}
.pb-ai-modal__header h3 { margin: 0; font-size: 15px; color: var(--pb-text); }
.pb-ai-modal__close {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--pb-text-dim); padding: 4px 8px; border-radius: 4px;
}
.pb-ai-modal__close:hover { background: var(--pb-surface-alt); color: var(--pb-text); }

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

.pb-ai-chat { flex: 1; min-height: 100px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.pb-ai-msg { padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.6; max-width: 90%; animation: pbAiFade 0.2s ease; }
@keyframes pbAiFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.pb-ai-msg--user { background: var(--pb-primary); color: var(--pb-primary-text); align-self: flex-end; border-bottom-right-radius: 3px; }
.pb-ai-msg--ai { background: var(--pb-surface-alt); color: var(--pb-text-dim); align-self: flex-start; border: 1px solid var(--pb-border); border-bottom-left-radius: 3px; }
.pb-ai-msg--system { background: rgba(251,191,36,0.1); color: var(--pb-warning); align-self: center; font-size: 12px; text-align: center; border: 1px solid rgba(251,191,36,0.3); }
.pb-ai-msg--loading::after { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid var(--pb-primary); border-top-color: transparent; border-radius: 50%; animation: pbSpin 0.8s linear infinite; margin-left: 6px; vertical-align: middle; }
@keyframes pbSpin { to { transform: rotate(360deg); } }

.pb-ai-input-row { display: flex; gap: 8px; align-items: flex-end; }
.pb-ai-textarea {
  flex: 1; padding: 8px 12px; background: var(--pb-surface-alt); border: 1px solid var(--pb-border);
  border-radius: 6px; font-size: 13px; font-family: var(--pb-font); color: var(--pb-text);
  resize: none; min-height: 40px; max-height: 100px; outline: none;
}
.pb-ai-textarea:focus { border-color: var(--pb-primary); }
.pb-ai-send {
  background: var(--pb-primary); color: var(--pb-primary-text); border: none; padding: 8px 16px;
  border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--pb-font);
}
.pb-ai-send:disabled { opacity: 0.4; cursor: not-allowed; }

.pb-ai-actions { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--pb-border); }
.pb-ai-apply { background: var(--pb-success); color: var(--pb-primary-text); border: none; padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--pb-font); }
.pb-ai-apply:hover { opacity: 0.9; }
.pb-ai-apply:disabled { opacity: 0.4; }
.pb-ai-cancel { background: var(--pb-surface-alt); color: var(--pb-text-dim); border: 1px solid var(--pb-border); padding: 8px 16px; border-radius: 6px; font-size: 13px; cursor: pointer; font-family: var(--pb-font); }
.pb-ai-cancel:hover { color: var(--pb-text); }

/* ======== Rich text toolbar ======== */
.pb-rte-toolbar {
  display: none;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pb-surface);
  border: 1px solid var(--pb-border);
  border-radius: 6px;
  padding: 4px;
  gap: 2px;
  z-index: 20;
  box-shadow: var(--pb-shadow-md);
}

.pb-rte-toolbar.is-visible { display: flex; }

.pb-rte-toolbar button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 4px;
  color: var(--pb-text-dim);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--pb-font);
}

.pb-rte-toolbar button:hover {
  background: var(--pb-surface-alt);
  color: var(--pb-text);
}

.pb-rte-toolbar button.is-active {
  background: var(--pb-primary-bg);
  color: var(--pb-primary);
}
/* ======== THEME PREVIEW — Site theme colors on canvas ======== */

/* Re-resolve the section preview defaults INSIDE the canvas scope.
   --pb-section-bg is declared on :root / body[data-theme=dark] as
   var(--ap-footer-bg, var(--pb-surface)) — but custom properties
   substitute their var() references at computed-value time on the
   element the declaration applies to, and descendants inherit the
   already-substituted result. The theme's --ap-footer-bg only exists
   on .pb-canvas--theme-* (injected theme_css), NOT on :root, so the
   :root declaration permanently baked in the ADMIN fallback
   (--pb-surface): sections without a configured background showed the
   admin surface color instead of the theme's footer background, and
   ignored theme switches. Declaring the same value here makes the
   var() resolve against the canvas element, where the injected theme's
   footer background IS in scope (dark footer under --theme-dark, light
   footer under --theme-light). Inline per-section values written by
   the preview JS still win, unchanged. */
.pb-canvas--theme-dark,
.pb-canvas--theme-light {
  --pb-section-bg:      var(--ap-footer-bg, var(--pb-surface));
  --pb-section-bg-dark: var(--ap-footer-bg, var(--pb-surface));
}

.pb-canvas--theme-dark,
.pb-canvas--theme-light {
  /* Fallbacks if theme doesn't define them */
  --ap-color-primary: var(--pb-primary);
  --ap-color-primary-hover: var(--pb-primary-hover);
  --ap-color-text: var(--pb-text);
  --ap-color-text-inverse: var(--pb-primary-text);
  --ap-color-text-muted: var(--pb-text-muted);
  --ap-color-text-secondary: var(--pb-text-dim);
  --ap-color-link: var(--pb-primary);
  --ap-color-link-hover: var(--pb-primary-hover);
  --ap-color-border: var(--pb-border);
  --ap-color-surface: var(--pb-surface);
  --ap-color-surface-alt: var(--pb-surface-alt);
  --ap-font-heading: var(--pb-font);
  --ap-font-body: var(--pb-font);
  --ap-radius-md: var(--pb-radius);
}

/* Theme indicator badge in topbar */
.pb-theme-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--pb-text-muted);
  background: var(--pb-surface-alt);
  border: 1px solid var(--pb-border);
}

.pb-theme-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ap-color-primary, var(--pb-primary));
}

/* ======== NUMBER STEPPER ======== */
.pb-stepper {
  display: flex;
  align-items: center;
  gap: 0;
}
.pb-stepper .pb-field__input {
  border-radius: 6px 0 0 6px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.pb-stepper .pb-field__input::-webkit-inner-spin-button,
.pb-stepper .pb-field__input::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; }
.pb-stepper__btns {
  display: flex;
  flex-direction: column;
}
.pb-stepper__btn {
  width: 28px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pb-surface-alt);
  border: 1px solid var(--pb-border);
  color: var(--pb-text-dim);
  cursor: pointer;
  font-size: 10px;
  padding: 0;
  line-height: 1;
}
.pb-stepper__btn:first-child { border-radius: 0 6px 0 0; border-bottom: none; }
.pb-stepper__btn:last-child { border-radius: 0 0 6px 0; }
.pb-stepper__btn:hover { background: var(--pb-primary-bg); color: var(--pb-primary); }

/* ======== COLOR + ALPHA PICKER ======== */
.pb-color-alpha {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pb-color-alpha__row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pb-color-alpha__swatch {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--pb-border);
  cursor: pointer;
  padding: 2px;
  background: var(--pb-surface-alt);
  flex-shrink: 0;
}
.pb-color-alpha__slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, transparent, var(--pb-text));
  outline: none;
}
.pb-color-alpha__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pb-surface);
  border: 2px solid var(--pb-primary);
  cursor: pointer;
}
.pb-color-alpha__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--pb-surface);
  border: 2px solid var(--pb-primary);
  cursor: pointer;
}
.pb-color-alpha__label {
  font-size: 11px;
  color: var(--pb-text-muted);
  min-width: 30px;
  text-align: right;
}

/* ======== GRADIENT PRESETS ======== */
.pb-gradient-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.pb-gradient-preset {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 2px solid var(--pb-border);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  padding: 0;
}
.pb-gradient-preset:hover {
  border-color: var(--pb-primary);
  transform: scale(1.08);
}
.pb-gradient-preset.is-active {
  border-color: var(--pb-primary);
  box-shadow: 0 0 0 1px var(--pb-primary);
}

/* ======== EMPTY IMAGE BLOCK — hover & click ======== */
[data-image-pick-block]:hover {
  border-color: var(--pb-primary) !important;
  background: var(--pb-primary-bg) !important;
  color: var(--pb-primary) !important;
}

/* ======== GALLERY CANVAS CONTROLS ======== */
.pb-gal-thumb__remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid var(--pb-border); background: var(--pb-surface); color: var(--pb-text-muted);
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1; opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.pb-gal-thumb:hover .pb-gal-thumb__remove { opacity: 1; }
.pb-gal-thumb__remove:hover { color: var(--pb-text); border-color: var(--pb-border-strong); }

/* Gallery/Video Gallery: reorder arrows on thumbnails */
.pb-gal-thumb__arrows {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.pb-gal-thumb:hover .pb-gal-thumb__arrows {
  opacity: 1;
}
.pb-gal-thumb__arrow {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--pb-border);
  background: var(--pb-surface);
  color: var(--pb-text-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pb-gal-thumb__arrow:hover {
  color: var(--pb-primary);
  border-color: var(--pb-primary);
  background: var(--pb-primary-bg);
}

.pb-gal-canvas-add {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 14px; border-radius: 6px;
  background: var(--pb-surface-alt); color: var(--pb-text-dim);
  font-size: 12px; font-weight: 500;
  border: 1px dashed var(--pb-border);
  cursor: pointer; font-family: var(--pb-font);
  transition: all 0.15s;
}
.pb-gal-canvas-add:hover {
  background: var(--pb-primary-bg); color: var(--pb-primary);
  border-color: var(--pb-primary);
}

.pb-gal-canvas-empty {
  padding: 30px; text-align: center;
  background: var(--pb-surface-alt); border-radius: 8px;
  color: var(--pb-text-muted); cursor: pointer;
  border: 2px dashed var(--pb-border);
  transition: all 0.15s;
}
.pb-gal-canvas-empty:hover {
  border-color: var(--pb-primary);
  background: var(--pb-primary-bg);
  color: var(--pb-primary);
}

/* ======== SLIDESHOW CANVAS IMAGE CONTROLS ======== */
.pb-slide-pick-image {
  position: absolute; top: 8px; right: 8px; z-index: 16;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--pb-surface); color: var(--pb-text-dim);
  font-size: 11px; font-weight: 500;
  border: 1px solid var(--pb-border);
  cursor: pointer; font-family: var(--pb-font);
  opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.pb-item:hover .pb-slide-pick-image { opacity: 1; }
.pb-slide-pick-image:hover { color: var(--pb-primary); border-color: var(--pb-primary); }

.pb-slide-clear-image {
  position: absolute; top: 8px; right: 8px; z-index: 16;
  width: 24px; height: 24px; border-radius: 6px;
  border: 1px solid var(--pb-border); background: var(--pb-surface); color: var(--pb-text-muted);
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.pb-item:hover .pb-slide-clear-image { opacity: 1; }
.pb-slide-clear-image:hover { color: var(--pb-text); border-color: var(--pb-border-strong); }

.pb-slide-tab-add:hover {
  background: rgba(0,0,0,0.4) !important;
  border-color: rgba(255,255,255,0.8) !important;
}

.pb-slide-empty-image {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; cursor: pointer; border-radius: 6px;
  color: var(--pb-text-muted); font-size: 12px;
  background: rgba(0,0,0,0.1);
  transition: background 0.15s, color 0.15s;
}
.pb-slide-empty-image:hover {
  background: var(--pb-primary-bg);
  color: var(--pb-primary);
}

/* ======== TABLE VISUAL EDITOR ======== */
.pb-table-editor {
  border: 1px solid var(--pb-border);
  border-radius: 6px;
  overflow: hidden;
}
.pb-table-editor table {
  width: 100%;
  border-collapse: collapse;
}
.pb-table-editor th,
.pb-table-editor td {
  border: 1px solid var(--pb-border);
  padding: 0;
}
.pb-table-editor th {
  background: var(--pb-surface-alt);
}
.pb-table-editor input {
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  color: var(--pb-text);
  font-size: 12px;
  font-family: var(--pb-font);
  outline: none;
}
.pb-table-editor th input {
  font-weight: 600;
}
.pb-table-editor input:focus {
  background: var(--pb-primary-bg);
}
[data-table-remove-row]:hover,
[data-table-remove-col]:hover {
  opacity: 1 !important;
  color: var(--pb-danger) !important;
}
.pb-table-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.pb-table-col-aligns {
  display: flex;
  gap: 4px;
}

.pb-field__select--compact {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-size: 11px;
}

/* ============================================================================
   JS-generated UI components — extracted from innerHTML patterns
   ============================================================================ */

/* --- Cover image (thumbnails, previews) --- */
.pb-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-cover-img--constrained { width: 100%; height: 120px; object-fit: cover; }

/* --- Empty zone message (grid placeholders) --- */
.pb-empty-msg { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--pb-text-muted); }

/* --- Panel input (settings panel fields) --- */
.pb-panel-input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--pb-border);
  border-radius: 6px; background: var(--pb-surface-alt); color: var(--pb-text);
  font-size: 14px; box-sizing: border-box;
}

/* --- Overlay center (play buttons, loaders) --- */
.pb-overlay-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pb-overlay-center--no-events { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }

/* --- Picker zone (empty image/video/gallery placeholder) --- */
.pb-picker-zone {
  padding: 30px; text-align: center; background: var(--pb-surface-alt);
  border-radius: 8px; color: var(--pb-text-muted); cursor: pointer;
  border: 2px dashed var(--pb-border); transition: all 0.15s;
}
.pb-picker-label { font-size: 13px; margin-bottom: 6px; }
.pb-picker-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 14px; border-radius: 6px; background: var(--pb-primary-bg);
  color: var(--pb-primary); font-size: 12px; font-weight: 500;
  border: 1px solid var(--pb-primary);
}
.pb-picker-icon { opacity: 0.4; margin-bottom: 8px; }

/* --- Panel section header & divider --- */
.pb-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pb-panel-divider { border-top: 1px solid var(--pb-border); margin-top: 12px; padding-top: 12px; }
.pb-panel-divider--lg { border-top: 1px solid var(--pb-border); margin-top: 16px; padding-top: 16px; }

/* --- Modal close button --- */
/* Padding enlarges the touch target (the bare 22px glyph was hard to hit
   on mobile) without visually changing the transparent button. */
.pb-modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--pb-text-muted); padding: 6px 10px; line-height: 1; }

/* --- Themed dialog (replaces native prompt/confirm) ---
   Same pb-* tokens as the rest of the builder, so it matches the
   active light/dark admin theme instead of the browser chrome.
   z-index above the image-picker modal (10000). */
.pb-dialog-overlay {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.45); padding: 16px;
}
.pb-dialog {
  width: 100%; max-width: 420px;
  background: var(--pb-surface); color: var(--pb-text);
  border: 1px solid var(--pb-border); border-radius: var(--pb-radius);
  box-shadow: var(--pb-shadow-lg); padding: 16px 20px 20px;
  font-family: var(--pb-font);
}
.pb-dialog__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.pb-dialog__message {
  font-size: 14px; color: var(--pb-text-dim);
  margin-bottom: 12px; white-space: pre-line;
}
.pb-dialog__actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
}

/* --- Clear/remove button on media items --- */
.pb-clear-btn {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  border-radius: 6px; border: 1px solid var(--pb-border); background: var(--pb-surface);
  color: var(--pb-text-muted); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.pb-clear-btn--z2 { z-index: 2; }

/* --- Thumbnail remove (small round ✕ on gallery thumbs) --- */
.pb-thumb-remove {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border-radius: 50%; border: none; background: rgba(0,0,0,0.6);
  color: #fff; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}

/* --- Thumbnail label (small text under thumbs) --- */
.pb-thumb-label {
  padding: 2px 4px; font-size: 9px; color: var(--pb-text-muted);
  background: var(--pb-surface-alt); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* --- Play button overlay (video) --- */
.pb-play-btn {
  background: rgba(0,0,0,0.6); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.pb-play-btn--lg { width: 48px; height: 48px; font-size: 20px; }
.pb-play-btn--md { width: 40px; height: 40px; font-size: 18px; }
.pb-play-btn--sm { width: 32px; height: 32px; font-size: 14px; }
.pb-play-btn--xs { width: 24px; height: 24px; font-size: 10px; }

/* --- Video container --- */
.pb-video-wrap { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--pb-border); }
.pb-video-wrap--sm { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--pb-border); }
.pb-video-title-bar {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff; font-size: 11px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.pb-video-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
  color: rgba(255,255,255,0.3); font-size: 11px;
}
.pb-video-placeholder--sm { font-size: 10px; }
.pb-aspect-video { aspect-ratio: 16 / 9; }
.pb-aspect-square { aspect-ratio: 1; }

/* --- Section block toolbar buttons --- */
.pb-sec-toolbar-btn {
  width: 20px; height: 20px; border: none; background: var(--pb-surface-alt);
  border-radius: 3px; color: var(--pb-text-dim); cursor: pointer;
  font-size: 10px; display: flex; align-items: center; justify-content: center;
}

/* --- Video gallery toolbar buttons (white, on dark overlay) --- */
.pb-vg-toolbar-btn {
  width: 20px; height: 20px; border: none; background: var(--pb-surface-alt);
  border-radius: 3px; color: var(--pb-text-dim); cursor: pointer;
  font-size: 10px; display: flex; align-items: center; justify-content: center;
}

/* --- Dashed input (section add-block, etc.) --- */
.pb-dashed-add {
  width: 100%; padding: 8px; border-radius: 6px; border: 1px dashed var(--pb-border);
  background: var(--pb-surface-alt); color: var(--pb-text); cursor: pointer;
  font-size: 13px; margin-bottom: 8px;
}
.pb-dashed-add--compact {
  width: 100%; padding: 6px; border: 1px dashed var(--pb-border);
  border-radius: 4px; background: transparent; color: var(--pb-text-muted);
  cursor: pointer; font-size: 12px; margin-top: 4px;
}
.pb-dashed-add--dark {
  width: 100%; padding: 6px; border: 1px dashed rgba(255,255,255,0.4);
  border-radius: 4px; background: rgba(0,0,0,0.2); color: rgba(255,255,255,0.7);
  cursor: pointer; font-size: 12px; margin-top: 4px;
}

/* --- Card / item wrapper --- */
.pb-item-card { border: 1px solid var(--pb-border); border-radius: 6px; padding: 8px; margin-bottom: 8px; }

/* --- Alt text badges --- */
.pb-alt-badge {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px;
  border-radius: 6px; margin-bottom: 12px; font-size: 12px;
}
.pb-alt-badge--ok {
  background: var(--pb-success-bg); border: 1px solid var(--pb-success); color: var(--pb-text-dim);
}
.pb-alt-badge--warn {
  background: var(--pb-warning-bg); border: 1px solid var(--pb-warning); color: var(--pb-warning);
}
.pb-alt-badge__label { font-weight: 600; color: var(--pb-success); flex-shrink: 0; }

/* --- Section zone --- */
/* Background reacts to canvas theme without a re-render: preview writes both
   --pb-section-bg (light) and --pb-section-bg-dark (dark) inline, the dark
   canvas class picks which one applies. Same pattern as inline text color. */
.pb-section-zone {
  background: var(--pb-section-bg);
}
.pb-canvas--theme-dark .pb-section-zone {
  background: var(--pb-section-bg-dark, var(--pb-section-bg));
}
/* "none" bg type — dashed outline instead of a fill */
.pb-section-zone--none {
  border: 1px dashed var(--pb-border);
}
.pb-section-zone__label { font-size: 11px; color: var(--pb-text-muted); margin-bottom: 8px; }
.pb-section-zone__empty {
  padding: 20px; text-align: center; border: 1px dashed var(--pb-border);
  border-radius: 6px; color: var(--pb-text-muted); font-size: 12px; cursor: pointer;
}
.pb-section-zone__empty--dark {
  padding: 20px; text-align: center; border: 1px dashed rgba(255,255,255,0.4);
  border-radius: 6px; color: rgba(255,255,255,0.7); font-size: 12px;
  cursor: pointer; background: rgba(0,0,0,0.2);
}
/* Top band (28px) reserved for the absolute hover toolbar (20px buttons at
   top:4px → bottom edge ~24px). Same reserved-space pattern as
   .pb-item__content (36px / 28px buttons) and .pb-col-block (30px / 22px
   buttons). Works for LTR and RTL (the toolbar flips to top-left in RTL,
   the band covers both). Also covers slideshow slide blocks, which reuse
   .pb-sec-block--dark + .pb-sec-block__toolbar. */
.pb-sec-block { background: var(--pb-primary-bg); border-radius: 6px; padding: 28px 8px 8px; margin-bottom: 6px; cursor: pointer; position: relative; }
.pb-sec-block--dark { background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border-radius: 6px; padding: 28px 8px 8px; margin-bottom: 6px; cursor: pointer; position: relative; }
.pb-sec-block__toolbar { position: absolute; top: 4px; right: 4px; display: none; gap: 2px; z-index: 10; }
.pb-sec-block:hover > .pb-sec-block__toolbar { display: flex; }

/* --- Gallery --- */
.pb-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.pb-gal-thumb--square { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; background: var(--pb-surface-alt); }

/* --- Heading in modals/panels --- */
.pb-heading-md { margin: 0; font-size: 16px; }

/* --- Submit button (disabled state) --- */
.pb-submit-disabled {
  width: 100%; padding: 10px; border-radius: 6px; border: none;
  background: var(--pb-primary); color: #fff; cursor: pointer;
  font-size: 14px; font-weight: 600; opacity: 0.5;
}
.pb-submit-primary {
  padding: 6px 16px; border-radius: 6px; border: none;
  background: var(--pb-primary); color: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600;
}

/* --- Dashed picker (smaller variant) --- */
.pb-picker-zone--sm {
  padding: 16px; text-align: center; border: 1px dashed var(--pb-border);
  border-radius: 6px; color: var(--pb-text-muted); font-size: 12px; margin-bottom: 8px;
}
.pb-picker-zone--info {
  padding: 20px; text-align: center; background: var(--pb-surface-alt);
  border-radius: 8px; color: var(--pb-text-dim); font-size: 13px;
  border: 1px solid var(--pb-border);
}
.pb-picker-zone--small-center {
  padding: 12px; text-align: center; background: var(--pb-surface-alt);
  border-radius: 4px; color: var(--pb-text-muted); font-size: 11px;
  cursor: pointer; border: 1px dashed var(--pb-border);
}
.pb-picker-zone--compact {
  padding: 8px; text-align: center; background: var(--pb-surface-alt);
  border-radius: 4px; color: var(--pb-text-muted); font-size: 11px;
}

/* --- Info box in panel --- */
.pb-info-box {
  padding: 12px 16px; background: var(--pb-surface-alt); border-radius: 8px;
  border: 1px solid var(--pb-border); display: flex; flex-direction: column; gap: 8px;
}

/* --- Misc panel utilities --- */
.pb-text-hint { font-size: 11px; color: var(--pb-text-muted); }
.pb-text-hint--dim { font-size: 11px; color: var(--pb-text-dim); }
.pb-text-hint--sm { font-size: 10px; color: var(--pb-text-muted); }
.pb-text-hint--label { font-size: 11px; font-weight: 600; color: var(--pb-text-muted); margin-bottom: 6px; }
.pb-text-hint--mono { font-size: 10px; color: var(--pb-text-muted); font-family: monospace; max-height: 40px; overflow: hidden; }
.pb-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-mb-1 { margin-bottom: 4px; }
.pb-mb-2 { margin-bottom: 8px; }
.pb-mb-3 { margin-bottom: 12px; }
.pb-mb-4 { margin-bottom: 16px; }
.pb-mt-1 { margin-top: 4px; }
.pb-mt-2 { margin-top: 8px; }
.pb-ms-3 { margin-inline-start: 12px; } /* RTL-safe horizontal spacing */
.pb-pt-7 { padding-top: 28px; }
.pb-flex-1 { flex: 1; }
.pb-d-none { display: none; }
.pb-relative { position: relative; }
.pb-color-primary { color: var(--pb-primary); }
.pb-inline-block { display: inline-block; }

/* --- Image preview in panel --- */
.pb-panel-preview { margin: -8px 0 12px; }
.pb-panel-preview img { max-width: 100%; max-height: 140px; border-radius: 6px; border: 1px solid var(--pb-border); }

/* --- Select/browse button --- */
.pb-browse-btn {
  flex-shrink: 0; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--pb-border);
  background: var(--pb-surface-alt); color: var(--pb-text); cursor: pointer;
  font-size: 13px; white-space: nowrap;
}
.pb-icon-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--pb-border); background: var(--pb-surface-alt);
  color: var(--pb-text-muted); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.pb-icon-btn--ghost {
  width: 20px; height: 20px; border: none; background: none; color: var(--pb-text-muted);
  cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; opacity: 0.5;
}
.pb-icon-btn--ghost-sm {
  flex-shrink: 0; width: 16px; height: 16px; border: none; background: none;
  color: var(--pb-text-muted); cursor: pointer; font-size: 11px; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 3px; opacity: 0.5;
}

/* --- Video gallery add-tab button --- */
.pb-vg-add-btn {
  width: 22px; height: 22px; border-radius: 4px; border: 1px dashed rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.2); color: #fff; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* --- Table in builder --- */
.pb-table-wrap { border: 1px solid var(--pb-border); border-radius: 6px; overflow: hidden; font-size: 12px; }

/* --- Misc one-offs --- */
.pb-fw-badge {
  font-size: 9px; background: var(--pb-primary); color: var(--pb-primary-text);
  padding: 1px 6px; border-radius: 3px; margin-left: 6px;
}
.pb-media-check {
  display: none; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px;
  background: var(--pb-primary); border-radius: 50%; color: #fff;
  font-size: 14px; line-height: 24px; text-align: center;
}
.pb-badge--warning {
  position: absolute; top: 4px; left: 4px; font-size: 10px; padding: 1px 6px;
  border-radius: 3px; background: var(--pb-warning-bg); color: var(--pb-warning);
  border: 1px solid var(--pb-warning); z-index: 1;
}
.pb-badge--muted {
  position: absolute; top: 4px; left: 4px; font-size: 10px; padding: 1px 6px;
  border-radius: 3px; background: var(--pb-surface-alt); color: var(--pb-text-muted);
  border: 1px solid var(--pb-border); z-index: 1;
}
.pb-media-card {
  cursor: pointer; border: 2px solid var(--pb-border); border-radius: 8px;
  overflow: hidden; transition: border-color 0.15s;
}
.pb-media-card--relative { position: relative; }
.pb-vg-title {
  padding: 6px 8px; font-size: 11px; color: var(--pb-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-vg-title--sm {
  padding: 4px 6px; font-size: 11px; color: var(--pb-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-sec-toolbar-pos { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; align-items: center; z-index: 15; }

/* --- AI button in topbar --- */
.pb-btn--ai { background: var(--pb-primary-bg); border-color: var(--pb-primary); color: var(--pb-primary); }

/* --- Video gallery tab button --- */
.pb-vg-tab-btn {
  width: 22px; height: 22px; border-radius: 4px; border: none;
  cursor: pointer; font-size: 10px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.pb-vg-tab-btn--active { background: var(--pb-primary); color: var(--pb-primary-text); }
.pb-vg-tab-btn--inactive { background: rgba(0,0,0,0.4); color: #fff; }

/* --- Hero image for section preview --- */
.pb-hero-img { width: 100%; max-height: 250px; object-fit: cover; display: block; opacity: 0.7; }
.pb-hero-overlay {
  position: absolute; inset: 0; padding: 16px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.pb-emoji-muted { font-size: 20px; opacity: 0.5; color: var(--pb-text-muted); }
.pb-emoji-muted--mb { font-size: 20px; margin-bottom: 6px; opacity: 0.5; }

/* --- Canvas button preview --- */
.pb-canvas-button {
  display: inline-block; padding: 8px 20px;
  background: var(--ap-color-primary, var(--pb-primary));
  color: var(--ap-color-text-inverse, var(--pb-primary-text));
  border-radius: var(--ap-radius-md, 6px); font-weight: 600; font-size: 14px;
}
.pb-canvas-button--sm {
  display: inline-block; padding: 4px 12px;
  background: var(--ap-color-primary, var(--pb-primary));
  color: var(--ap-color-text-inverse, var(--pb-primary-text));
  border-radius: 4px; font-weight: 600; font-size: 11px;
}

/* --- Image preview variants --- */
.pb-preview-img--sm { max-width: 100%; max-height: 80px; border-radius: 4px; border: 1px solid var(--pb-border); }
.pb-preview-img--md { max-width: 100%; max-height: 120px; border-radius: 4px; }
.pb-preview-img--canvas { width: 100%; height: auto; border-radius: 8px; display: block; }

/* Canvas image wrapper — mirrors the public .ap-block-image so the builder
   shows the real Size + Block Position. The .pb-img-canvas figure is
   inline-block and width-capped per size, so the text-align set on
   .pb-item__content / .pb-col-block__content (from the block's alignment)
   positions it left / center / right. Sizes match the site presets
   (small 400 / medium 800 / full 100%); max-width keeps it inside the canvas
   column.

   The remove (✕) button stays anchored to .pb-img-canvas-wrap (full width),
   NOT the figure, so it keeps its original spot just below the block toolbar
   and never overlaps it — regardless of the image's size or alignment. */
.pb-img-canvas-wrap {
  position: relative;
}
.pb-img-canvas {
  display: inline-block;
  margin: 0;
  max-width: 100%;
  vertical-align: top;
  line-height: 0;
}
.pb-img-canvas--small  { width: 400px; max-width: 100%; }
.pb-img-canvas--medium { width: 800px; max-width: 100%; }
.pb-img-canvas--full   { width: 100%; }

/* --- Color swatch in panel --- */
.pb-color-swatch {
  width: 48px; height: 36px; border: 1px solid var(--pb-border);
  border-radius: 6px; cursor: pointer; padding: 2px; background: var(--pb-surface-alt);
}

/* ============================================================
   FORM PREVIEW — canvas rendering of form blocks
   ============================================================ */
.pb-form-preview {
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  max-width: 100%;

  /* ── Variable bridge: structural vars only ──
     Color vars (--ap-color-*) are inherited from the active theme
     via .pb-canvas--theme-* — we must NOT override them here.
     Only layout/spacing/typography vars that themes don't define. ── */
  --ap-radius-lg: 12px;
  --ap-radius-md: 8px;
  --ap-border-width: 1px;
  --ap-space-1: 4px;
  --ap-space-2: 8px;
  --ap-space-3: 12px;
  --ap-space-4: 16px;
  --ap-space-5: 20px;
  --ap-space-6: 24px;
  --ap-space-8: 32px;
  --ap-space-10: 40px;
  --ap-text-xs: 12px;
  --ap-text-sm: 14px;
  --ap-text-base: 15px;
  --ap-text-lg: 18px;
  --ap-text-xl: 20px;
  --ap-text-2xl: 24px;
  --ap-text-3xl: 30px;
  --ap-font-heading: var(--pb-font);
  --ap-font-body: var(--pb-font);
  --ap-font-weight-bold: 700;
  --ap-font-weight-semibold: 600;
  --ap-leading-tight: 1.25;
  --ap-leading-normal: 1.5;
  --ap-transition-fast: 0.15s ease;
}
.pb-form-preview .ap-form {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.pb-form-preview .ap-form__title,
.pb-form-preview .ap-form__desc {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  overflow: hidden;
}
.pb-form-preview .ap-form__input,
.pb-form-preview .ap-form__textarea,
.pb-form-preview .ap-form__select {
  opacity: 0.7;
}
/* Submit button — styled by .ap-btn.ap-btn--primary from components.css;
   only preview-specific overrides here */
.pb-form-preview .ap-form__submit {
  opacity: 0.85;
  cursor: default;
}
.pb-form-preview--loading .ap-form {
  padding: 24px;
}
.pb-form-loading {
  text-align: center;
  color: var(--pb-text-muted);
  font-size: 13px;
  padding: 20px 0;
}

/* Panel form card — shows selected form in right sidebar */
.pb-panel-form-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--pb-radius-sm, 6px);
  border: 1.5px solid var(--pb-border);
  background: var(--pb-surface-alt, var(--pb-bg));
}
.pb-panel-form-card__info {
  flex: 1;
  min-width: 0;
}
.pb-panel-form-card__title {
  font-weight: 600;
  font-size: 13px;
  color: var(--pb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-panel-form-card__meta {
  font-size: 11px;
  color: var(--pb-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-panel-form-card__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ============================================================
   FORM PICKER MODAL — language tabs, search, cards
   ============================================================ */
.pb-form-lang-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.pb-form-lang-tab {
  padding: 6px 16px;
  border-radius: var(--pb-radius, 8px);
  border: 1.5px solid var(--pb-border);
  background: transparent;
  color: var(--pb-text-dim);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--pb-font);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  letter-spacing: 0.02em;
}
.pb-form-lang-tab:hover {
  border-color: var(--pb-primary);
  color: var(--pb-text);
  background: var(--pb-primary-bg);
}
.pb-form-lang-tab.is-active {
  background: var(--pb-primary);
  border-color: var(--pb-primary);
  color: var(--pb-primary-text, #fff);
}
.pb-form-pick-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.pb-form-pick-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--pb-radius, 8px);
  border: 1.5px solid var(--pb-border);
  background: var(--pb-surface);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.pb-form-pick-card:hover {
  border-color: var(--pb-primary);
  background: var(--pb-primary-bg);
  box-shadow: var(--pb-shadow-sm);
}
.pb-form-pick-card:active {
  transform: scale(0.985);
  box-shadow: none;
}
.pb-form-pick-card.is-selected {
  border-color: var(--pb-primary);
  background: var(--pb-primary-bg);
}
.pb-form-pick-card__icon {
  flex-shrink: 0;
  color: var(--pb-text-muted);
}
.pb-form-pick-card.is-selected .pb-form-pick-card__icon {
  color: var(--pb-primary);
}
.pb-form-pick-card__info {
  flex: 1;
  min-width: 0;
}
.pb-form-pick-card__title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-form-pick-card__meta {
  font-size: 12px;
  color: var(--pb-text-muted);
  margin-top: 2px;
}
.pb-form-pick-card__check {
  color: var(--pb-primary);
  font-weight: 600;
  font-size: 16px;
}
.pb-form-pick-card__lang {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--pb-text-muted);
  background: var(--pb-surface-alt, var(--pb-bg));
  border: 1px solid var(--pb-border);
}

/* ============================================================
   HARDCODE CLEANUP — extracted inline styles → CSS classes
   ============================================================ */

/* Theme toggle icons — hidden by default, toggled by JS */
#pbThemeIconSun,
#pbThemeIconMoon { display: none; }

/* Canvas: alt badge (flex row with alt label) */
.pb-alt-badge-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
/* Canvas: alt warning badge */
.pb-alt-warn {
  background: var(--pb-warning-bg);
  color: var(--pb-warning);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--pb-warning);
}
/* Canvas: spacer block preview */
.pb-spacer-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pb-text-muted);
  font-size: 11px;
}
/* Canvas: section label dim text (content width) */
.pb-dim { opacity: 0.6; }

/* Canvas: video gallery add button center */
.pb-text-center { text-align: center; }

/* Canvas: table header cell */
.pb-table-th {
  background: var(--pb-surface-alt);
  border: 1px solid var(--pb-border);
  white-space: nowrap;
}
/* Canvas: table body cell */
.pb-table-td {
  border: 1px solid var(--pb-border);
}
/* Canvas: table insert-row (between data rows) */
.pb-table-insert-row td {
  border: none;
  padding: 0;
}
/* Canvas: table row action column (delete button) */
.pb-table-row-actions {
  border: none !important;
  background: none !important;
  width: 20px;
  padding: 0 2px !important;
}
.pb-table-row-delete {
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--pb-text-muted);
  cursor: pointer;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
tr:hover .pb-table-row-delete {
  opacity: 0.5;
}
.pb-table-row-delete:hover {
  opacity: 1;
  color: var(--pb-danger);
  background: var(--pb-danger-bg);
}
/* Canvas: dot symbol button — needs explicit color */
.pb-table-symbols__btn--dot {
  color: var(--pb-text);
}
/* Panel: table header cell row (input + remove button) */
.pb-table-header-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
/* Panel: table row remove button cell */
.pb-table-remove-cell {
  border: none;
  padding: 0;
  width: 36px;
  white-space: nowrap;
}

/* Canvas: audio block layout */
.pb-audio-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pb-input--sm { font-size: 12px; }

/* Canvas: quote author attribution */
.pb-quote-author {
  color: var(--ap-color-text-secondary, var(--pb-text-dim));
  margin-left: 20px;
}

/* Canvas: slideshow wrapper — own container instead of pb-video-wrap */
.pb-slideshow-wrap {
  position: relative;
  border-radius: 8px;
  border: 1px solid var(--pb-border);
  overflow: hidden;
}
.pb-slideshow-wrap .pb-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.pb-slideshow-wrap .pb-slide-placeholder {
  position: absolute;
  inset: 0;
}
.pb-slideshow-wrap .pb-hero-overlay {
  position: relative;
  inset: auto;
  min-height: 250px;
}

/* Canvas: slideshow empty placeholder height */
.pb-slide-placeholder { height: 150px; }

/* Canvas: slideshow slide zone — clear space for slide tabs */
.pb-slide-zone { padding-top: 38px; }

/* Canvas: slideshow slide empty image — push to top */
.pb-slide-empty-image { margin-bottom: auto; }

/* Canvas: slide tab — base styles (active/inactive set by JS class) */
.pb-slide-tab {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  color: #fff;
}
.pb-slide-tab.is-active {
  background: var(--pb-primary);
  color: var(--pb-primary-text);
}

/* Canvas: unknown block fallback */
.pb-block-unknown {
  color: var(--pb-text-muted);
}

/* Nested blocks: heading in columns/sections/slides */
.pb-nested-heading { font-size: 14px; }
/* Nested blocks: text in columns/sections/slides */
.pb-nested-text { font-size: 12px; min-height: 2em; }
/* Nested blocks: alt badge margin */
.pb-nested-alt { margin-top: 3px; }
/* Nested blocks: divider */
.pb-nested-divider {
  border: none;
  border-top: 1px solid var(--pb-border);
}
/* Nested blocks: spacer */
.pb-nested-spacer {
  background: var(--pb-surface-alt);
  border-radius: 4px;
  opacity: 0.3;
}

/* Panel: negative margin hints (pull up below inputs) */
.pb-hint--pull-sm { margin: -2px 0 6px; }
.pb-hint--pull-md { margin: -6px 0 8px; }
.pb-hint--pull-lg { margin: -6px 0 12px; }
.pb-hint--pull-section { margin-top: -8px; }

/* Panel: count labels (gallery, video gallery, accordion, tabs) */
.pb-panel-count { font-size: 12px; }

/* Panel: thumbnail grids in settings */
.pb-panel-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pb-panel-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }

/* Panel: empty cell placeholder */
.pb-panel-empty-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pb-surface-alt);
  color: var(--pb-text-muted);
  font-size: 10px;
}

/* Panel: header flush (no bottom margin) */
.pb-panel-header--flush { margin-bottom: 0; }

/* Gallery modal: selected count */
.pb-gal-pick-count { font-size: 13px; }

/* Gallery modal: image card */
.pb-gal-pick-card {
  cursor: pointer;
  border: 2px solid var(--pb-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
  position: relative;
}

/* AI actions — hidden by default */
.pb-ai-actions { display: none; }

/* Image URL field: flex row */
.pb-field-image-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Panel: slide preview image */
.pb-slide-preview-wrap { margin: -6px 0 8px; }
/* Panel: slide alt text */
.pb-slide-alt-hint { margin: -2px 0 6px; }

/* Form picker button full width */
.pb-btn--full { width: 100%; }

/* ============================================================================
   RTL SUPPORT — Arabic, Hebrew
   ============================================================================ */
[dir="rtl"] .pb-sidebar {
  border-right: none;
  border-left: 1px solid var(--pb-border);
}

[dir="rtl"] .pb-panel {
  border-left: none;
  border-right: 1px solid var(--pb-border);
}

@media (max-width: 640px) {
  [dir="rtl"] .pb-panel {
    right: auto;
    left: 0;
  }
}

[dir="rtl"] .pb-inline-quote {
  border-left: none;
  border-right: 3px solid var(--ap-color-primary, var(--pb-primary));
  padding-left: 8px;
  padding-right: 16px;
  border-radius: 4px 0 0 4px;
}

/* Toolbar & control positions */
[dir="rtl"] .pb-gal-thumb__remove,
[dir="rtl"] .pb-slide-pick-image,
[dir="rtl"] .pb-slide-clear-image {
  right: auto;
  left: 4px;
}
[dir="rtl"] .pb-slide-pick-image,
[dir="rtl"] .pb-slide-clear-image {
  left: 8px;
}

[dir="rtl"] .pb-sec-block__toolbar {
  right: auto;
  left: 4px;
}

/* Video gallery remove buttons */
[dir="rtl"] .pb-vgal-remove {
  right: auto;
  left: 6px;
}

[dir="rtl"] .pb-vgal-remove--sm {
  right: auto;
  left: 3px;
}

/* Section toolbar */
[dir="rtl"] .pb-sec-toolbar-pos {
  left: auto;
  right: 8px;
}

/* Full-width badge */
[dir="rtl"] .pb-fw-badge,
[dir="rtl"] .pb-sec-fw-badge {
  left: auto;
  right: 4px;
}

/* Loading spinner margin */
[dir="rtl"] .pb-ai-msg--loading::after {
  margin-left: 0;
  margin-right: 6px;
}

/* Field label tag */
[dir="rtl"] .pb-field__tag {
  left: auto;
  right: 8px;
}

/* Panel text alignment */
[dir="rtl"] .pb-panel__actions {
  text-align: left;
}

/* Accordion chevron in panel */
[dir="rtl"] .pb-acc-badge {
  margin-left: 0;
  margin-right: 6px;
}

[dir="rtl"] .pb-ai-footer {
  margin-left: 0;
  margin-right: 20px;
}

/* Logo Ticker — canvas preview */
.pb-ticker-preview { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px 0; }
.pb-ticker-preview .pb-gal-thumb { width: 56px; height: 56px; flex-shrink: 0; }
.pb-ticker-preview .pb-gal-thumb img { width: 100%; height: 100%; object-fit: contain; }

/* ============================================================================
   Section / Slideshow text_color override for nested blocks

   When user sets text_color in Section or Slideshow block settings, force
   all nested block content (heading, text, quote) to that color, beating
   the default --ap-color-text rules on .pb-inline-* classes.

   Specificity: (0,3,0) — parent class + attribute selector + child class —
   wins over the bare .pb-inline-heading / .pb-inline-text / .pb-inline-quote
   rules (0,1,0) without needing !important.

   Buttons (.pb-inline-btn) are intentionally excluded — they keep their own
   visual identity, matching the public site's :not(.ap-btn) exclusion in
   page-builder-blocks.css.
   ============================================================================ */

.pb-section-zone[data-text-color="light"] .pb-inline-heading,
.pb-section-zone[data-text-color="light"] .pb-inline-text,
.pb-section-zone[data-text-color="light"] .pb-inline-quote,
.pb-slide-zone[data-text-color="light"] .pb-inline-heading,
.pb-slide-zone[data-text-color="light"] .pb-inline-text,
.pb-slide-zone[data-text-color="light"] .pb-inline-quote {
  color: var(--ap-color-white);
}

.pb-section-zone[data-text-color="dark"] .pb-inline-heading,
.pb-section-zone[data-text-color="dark"] .pb-inline-text,
.pb-section-zone[data-text-color="dark"] .pb-inline-quote,
.pb-slide-zone[data-text-color="dark"] .pb-inline-heading,
.pb-slide-zone[data-text-color="dark"] .pb-inline-text,
.pb-slide-zone[data-text-color="dark"] .pb-inline-quote {
  color: var(--ap-color-black);
}
