/* ── Shared A+ Module Component Styles ──────────────────────────────────────
   Used by: aplus-builder.html, authority-suite.html, listing-builder.html
   CSS namespace: .lb-aplus-* (edit cards), .lb-pv-* (preview)
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Inline editing ──────────────────────────────────────────────────────── */
.lb-aplus-field-val { cursor: text; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; transition: background 0.15s; }
.lb-aplus-field-val:hover { background: var(--form-input); }
.lb-aplus-field-val[contenteditable="true"] { background: var(--form-input); outline: 2px solid var(--mint); outline-offset: 1px; cursor: text; white-space: pre-wrap; }
.lb-aplus-field-edit-hint { font-size: 0.65rem; color: var(--t3); margin-top: 4px; margin-bottom: 8px; display: none; }
.lb-aplus-module-body.open .lb-aplus-field-edit-hint { display: block; }

/* ── Refine buttons ──────────────────────────────────────────────────────── */
.lb-aplus-refine-row { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.lb-aplus-refine-btn { font-size: 0.68rem; color: var(--t3); background: var(--b1); border: 1px solid var(--b2); border-radius: 5px; padding: 3px 10px; cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap; }
.lb-aplus-refine-btn:hover { background: var(--blue-a08); color: var(--blue); border-color: var(--blue-a20); }
.lb-aplus-refine-btn.loading { opacity: 0.5; pointer-events: none; }

/* ── Palette picker ──────────────────────────────────────────────────────── */
.lb-aplus-palette-bar { display: flex; align-items: center; gap: 6px; padding: 0 0 14px; flex-wrap: wrap; }
.lb-aplus-palette-label { font-size: 0.7rem; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin-right: 2px; }
.lb-aplus-palette-opt { display: flex; gap: 3px; align-items: center; cursor: pointer; border-radius: 8px; padding: 4px 8px 4px 5px; border: 2px solid transparent; transition: border-color 0.15s; }
.lb-aplus-palette-opt:hover { border-color: var(--b2); }
.lb-aplus-palette-opt.active { border-color: var(--mint); }
.lb-aplus-palette-swatch { width: 14px; height: 14px; border-radius: 3px; }
.lb-aplus-palette-name { font-size: 0.72rem; color: var(--t2); }

/* ── Module card drag-to-reorder ─────────────────────────────────────────── */
.lb-aplus-module { transition: opacity 0.15s; }
.lb-aplus-module.lb-dragging { opacity: 0.4; }
.lb-aplus-module.lb-drag-over { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 12px; }
.lb-aplus-drag-handle { color: var(--t3); cursor: grab; display: flex; align-items: center; padding: 0 6px 0 0; flex-shrink: 0; transition: color 0.15s; }
.lb-aplus-drag-handle:hover { color: var(--t1); }

/* ── Module card structure ───────────────────────────────────────────────── */
.lb-aplus-modules { display: flex; flex-direction: column; gap: 10px; }
.lb-aplus-module { background: var(--card); border: 1px solid var(--b1); border-radius: 12px; overflow: hidden; }
.lb-aplus-module-hdr { padding: 10px 14px; background: var(--card-header); border-bottom: 1px solid var(--b1); display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.lb-aplus-module-type { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t3); }
.lb-aplus-module-chevron { color: var(--t3); transition: transform 0.2s; }
.lb-aplus-module-chevron.open { transform: rotate(180deg); }
.lb-aplus-module-body { padding: 14px; display: none; }
.lb-aplus-module-body.open { display: block; }
.lb-aplus-field { margin-bottom: 10px; }
.lb-aplus-field:last-child { margin-bottom: 0; }
.lb-aplus-field-lbl { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--t3); font-weight: 700; margin-bottom: 4px; font-family: var(--fm); }
.lb-aplus-field-val { font-size: 0.83rem; color: var(--t2); line-height: 1.55; white-space: pre-wrap; font-family: var(--fb); }
.lb-aplus-open-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--b2); border-radius: 8px; padding: 6px 12px; font-size: 0.78rem; color: var(--t3); cursor: pointer; font-family: var(--fb); transition: all 0.15s; margin-top: 12px; }
.lb-aplus-open-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ── Preview panel (fields→preview toggle) ───────────────────────────────── */
.lb-aplus-preview-panel { display: none; }
.lb-aplus-preview-wrap { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; }

/* ── Preview module (lb-pv-*) ────────────────────────────────────────────── */
.lb-pv-module { padding: 24px 28px; border-bottom: 1px solid #eee; position: relative; }
.lb-pv-module:last-child { border-bottom: none; }
.lb-pv-type { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #aaa; margin-bottom: 10px; }
.lb-pv-h { font-size: 1.25rem; font-weight: 700; color: #0f1111; margin-bottom: 6px; line-height: 1.3; }
.lb-pv-text { font-size: 0.88rem; color: #333; line-height: 1.65; margin-bottom: 8px; }
.lb-pv-cta { display: inline-block; background: #ffd814; color: #0f1111; border-radius: 20px; padding: 8px 22px; font-size: 0.85rem; font-weight: 600; margin-top: 8px; }
.lb-pv-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; margin-top: 10px; }
.lb-pv-feature { text-align: center; }
.lb-pv-feature-icon { width: 56px; height: 56px; background: #f4f4f4; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 0.62rem; }
.lb-pv-feature-title { font-size: 0.82rem; font-weight: 600; color: #0f1111; margin-bottom: 2px; }
.lb-pv-feature-desc { font-size: 0.75rem; color: #565959; }
.lb-pv-excerpt { font-style: italic; color: #333; line-height: 1.7; background: #fafafa; padding: 14px 18px; border-radius: 6px; font-size: 0.88rem; }
.lb-pv-context { color: #aaa; font-size: 0.75rem; margin-top: 6px; }
.lb-pv-author-row { display: flex; gap: 18px; align-items: flex-start; }
.lb-pv-author-img { width: 80px; height: 80px; background: #f4f4f4; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #aaa; font-size: 0.62rem; text-align: center; }
.lb-pv-author-text { flex: 1; }

/* ── Preview module drag-to-reorder ─────────────────────────────────────── */
.lb-pv-drag-handle { position: absolute; top: 10px; right: 10px; color: #ccc; cursor: grab; padding: 4px; border-radius: 4px; display: flex; align-items: center; opacity: 0; transition: opacity 0.15s; z-index: 2; }
.lb-pv-module:hover .lb-pv-drag-handle { opacity: 1; }
.lb-pv-drag-handle:hover { color: #999; background: rgba(0,0,0,0.04); }
.lb-pv-module.lb-pv-dragging { opacity: 0.4; }
.lb-pv-module.lb-pv-drag-over { outline: 2px solid var(--mint, #2ed8a8); outline-offset: -2px; border-radius: 0; }