/* =============================================================================
   SQSA Custom Document Builder + Edit Button styles
   ============================================================================= */

/* ── Edit button on rendered documents ── */
/* Renders as its own right-aligned row directly above the document/table —
   NOT absolutely positioned. It previously floated above the section via a
   negative top offset, but Divi's Code module wraps this whole block in a
   container with overflow: hidden (for its own border-radius/box-shadow),
   so any offset large enough to clear the header text got clipped at the
   module's edge; anything small enough to avoid clipping ended up
   overlapping the header text instead. Staying in normal flow sidesteps
   the clipping boundary entirely and guarantees it can never overlap the
   table header.
   Hidden by default (shown on hover of the containing section) unless the
   sitewide "Frontend Edit Button Visibility" option is set to Always Show,
   which adds body.sqsa-edit-btns-always-visible (see inc/theme-options.php).
   Uses visibility (not display) so toggling it doesn't shift layout. */
.sqsa-doc-edit-btn-wrap {
  text-align: right;
  margin-bottom: 8px;
  visibility: hidden;
}

.sqsa-doc-section:hover .sqsa-doc-edit-btn-wrap,
.sqsa-doc-section:focus-within .sqsa-doc-edit-btn-wrap {
  visibility: visible;
}

body.sqsa-edit-btns-always-visible .sqsa-doc-edit-btn-wrap {
  visibility: visible;
}

/* Dashed outline around the whole document/table — same treatment as the
   front-end text-snippet highlight (see .sqsa-snippet-wrap:hover in
   css/snippet-edit.css), shown together with the Edit button so it's
   clear which block on the page that button controls.
   .sqsa-doc-section itself is the document's normal content wrapper and
   renders for every visitor, but sqsa_cdb_inject_edit_button() only injects
   .sqsa-doc-edit-btn-wrap for users who can edit_pages — so :has() scopes
   the outline to sections that actually contain that button, instead of
   showing a pointless "editable" outline to visitors on hover who have
   nothing to click. */
.sqsa-doc-section:has(.sqsa-doc-edit-btn-wrap):hover,
.sqsa-doc-section:has(.sqsa-doc-edit-btn-wrap):focus-within,
body.sqsa-edit-btns-always-visible .sqsa-doc-section:has(.sqsa-doc-edit-btn-wrap) {
  outline: 1px dashed #c99600;
  outline-offset: 4px;
}

.sqsa-doc-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: #7a5c00;
  background: #fef3cc;
  border: 1px solid #4a3600;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.sqsa-doc-edit-btn:hover {
  background: #c99600;
  color: #fff;
  text-decoration: none;
}

/* ── Custom doc builder container ── */
.sqsa-cdb {
  max-width: 860px;
  margin: 0 auto;
}

/* ── Modes ── */
.sqsa-cdb-mode[hidden] { display: none; }

/* ── Rich text editor wrap ── */
.sqsa-cdb-editor-wrap {
  border: 1px solid #c0cad4;
  border-radius: 4px;
  margin-top: 12px;
  overflow: hidden;
}

/* ── Visual / Text tabs ── */
.sqsa-cdb-editor-tabs {
  display: flex;
  background: #f0f0f0;
  border-bottom: 1px solid #c0cad4;
}

.sqsa-cdb-editor-tab {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  background: none;
  border: none;
  border-right: 1px solid #c0cad4;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.sqsa-cdb-editor-tab:hover {
  background: #e8e8e8;
  color: #333;
}

.sqsa-cdb-editor-tab.is-active {
  background: #fff;
  color: #c99600;
  font-weight: 600;
  border-bottom: 2px solid #c99600;
  margin-bottom: -1px;
}

/* ── Text pane (raw HTML textarea) ── */
.sqsa-cdb-text-pane[hidden] { display: none; }

.sqsa-cdb-html-source {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 320px;
  padding: 14px 16px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #1f2b3a;
  background: #fafafa;
  border: none;
  resize: vertical;
}

.sqsa-cdb-html-source:focus {
  outline: none;
  background: #fff;
}

/* ── Toolbar ── */
.sqsa-cdb-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.sqsa-cdb-toolbar-sep {
  width: 1px;
  height: 20px;
  background: #d0d0d0;
  margin: 0 4px;
}

.sqsa-cdb-fmt-select {
  font-size: 13px;
  padding: 3px 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  color: #333;
}

.sqsa-cdb-fmt-select:focus {
  outline: none;
  border-color: #c99600;
}

/* ── Contenteditable area ── */
.sqsa-cdb-content {
  min-height: 320px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: #1f2b3a;
  background: #fff;
  outline: none;
  cursor: text;
}

.sqsa-cdb-content:focus {
  background: #fefefe;
}

/* Placeholder */
.sqsa-cdb-content:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
  font-style: italic;
}

.sqsa-cdb-content:focus::before {
  content: '';
}

/* Content typography */
.sqsa-cdb-content h2 {
  font-size: 1.4em;
  font-weight: 600;
  margin: 1em 0 0.4em;
}

.sqsa-cdb-content h3 {
  font-size: 1.2em;
  font-weight: 600;
  margin: 0.9em 0 0.35em;
}

.sqsa-cdb-content ul,
.sqsa-cdb-content ol {
  padding-left: 1.6em;
  margin: 0.5em 0;
}

.sqsa-cdb-content li {
  margin-bottom: 0.25em;
}

.sqsa-cdb-content a {
  color: #c99600;
  text-decoration: underline;
}

/* Iframe placeholder in editor */
.sqsa-cdb-iframe-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 0;
  background: #f0f4ff;
  border: 1px dashed #7090cc;
  border-radius: 4px;
  cursor: default;
  user-select: none;
}

.sqsa-cdb-iframe-icon {
  font-size: 18px;
  flex: 0 0 auto;
}

.sqsa-cdb-iframe-label {
  font-weight: 600;
  font-size: 13px;
  color: #3a5080;
  flex: 0 0 auto;
}

.sqsa-cdb-iframe-src {
  font-size: 12px;
  color: #7090cc;
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

.sqsa-cdb-iframe-edit-btn {
  flex: 0 0 auto;
  margin-left: auto;
  background: none;
  border: 1px solid #7090cc;
  border-radius: 3px;
  color: #3a5080;
  font-size: 14px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.sqsa-cdb-iframe-edit-btn:hover,
.sqsa-cdb-iframe-edit-btn.is-active {
  background: #c99600;
  border-color: #c99600;
  color: #fff;
}

/* Inline iframe editor panel */
.sqsa-cdb-iframe-editor {
  margin: 0 0 8px 0;
  padding: 10px 12px;
  background: #f8f8f8;
  border: 1px dashed #7090cc;
  border-top: none;
  border-radius: 0 0 4px 4px;
}

.sqsa-cdb-iframe-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px;
  border: 1px solid #c0cad4;
  border-radius: 3px;
  resize: vertical;
  color: #1f2b3a;
  background: #fff;
}

.sqsa-cdb-iframe-textarea:focus {
  outline: none;
  border-color: #c99600;
}

.sqsa-cdb-iframe-editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ── Inline field (toggle beside title) ── */
.sqsa-ci-grid-title-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.sqsa-ci-grid-title-row .sqsa-ci-field:first-child {
  flex: 1 1 auto;
}

.sqsa-ci-field--inline {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 2px;
}

.sqsa-ci-field--inline label:first-child {
  font-size: 13px;
  font-weight: 600;
  color: #444;
  white-space: nowrap;
}

/* ── Edit actions row ── */
.sqsa-cdb-edit-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ── TomSelect — scoped to custom doc builder ── */
#sqsa-cdb #sqsa-cdb-picker {
  display: none !important;
}