/* ═══════════════════════════════════════════════
   Frontend Editor
   ═══════════════════════════════════════════════ */

/* Scroll lock: the JS (lockBody) adds .fe-lock to the HTML element — the real
   scroll container — which preserves scrollTop while blocking user scrolling.
   NEVER put overflow:hidden or position:fixed on body.fe-no-scroll: this
   theme sets `html, body { height:100% }`, so either one collapses/clips the
   document and snaps the viewport to the top. body.fe-no-scroll remains as a
   state hook only. */
   html.fe-lock { overflow: hidden; }
   #fe-slideout-body { overscroll-behavior: contain; }
   
   /* ── Overlay ── */
   #fe-overlay { position:fixed; inset:0; z-index:99998; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .3s; }
   #fe-overlay.is-visible { opacity:1; pointer-events:auto; }
   
   /* ── Slideout ── */
   #fe-slideout { position:fixed; top:0; right:0; width:560px; max-width:92vw; height:100vh; z-index:99999; background:#fff; box-shadow:-8px 0 30px rgba(0,0,0,.12); transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow:hidden; }
   #fe-slideout.is-open { transform:translateX(0); }
   
   .fe-slideout-header { display:flex; align-items:center; justify-content:space-between; padding:20px 28px; border-bottom:1px solid #e5e7eb; flex-shrink:0; background:#fafafa; }
   .fe-slideout-header h3 { margin:0; font-size:16px; font-weight:600; color:#111; text-transform:capitalize; }
   #fe-close-slideout { background:none; border:none; font-size:28px; line-height:1; color:#6b7280; cursor:pointer; padding:4px 8px; border-radius:6px; transition:background .15s,color .15s; }
   #fe-close-slideout:hover { background:#f3f4f6; color:#111; }
   
   #fe-slideout-body { flex:1; overflow-y:auto; padding:28px; }
   
   .fe-loading { text-align:center; color:#9ca3af; padding:60px 20px; font-size:14px; }
   .fe-error { color:#dc2626; padding:20px; background:#fef2f2; border-radius:8px; font-size:14px; }
   .fe-note { font-size:13px; color:#6b7280; background:#f9fafb; border:1px dashed #d1d5db; border-radius:8px; padding:10px 12px; margin:0; }
   .fe-note code { font-size:12px; }
   
   /* ── Fields ── */
   .fe-field { margin-bottom:20px; }
   .fe-field label { display:block; font-size:13px; font-weight:600; color:#374151; margin-bottom:6px; }
   .fe-field input[type="text"], .fe-field input[type="url"], .fe-field input[type="email"], .fe-field input[type="number"], .fe-field input[type="color"], .fe-field textarea, .fe-field select {
     width:100%; padding:10px 14px; font-size:14px; line-height:1.5; border:1px solid #d1d5db; border-radius:8px; background:#fff; color:#111; transition:border-color .15s,box-shadow .15s; font-family:inherit; box-sizing:border-box;
   }
   .fe-field input:focus, .fe-field textarea:focus, .fe-field select:focus { outline:none; border-color:#111; box-shadow:0 0 0 3px rgba(17,17,17,.08); }
   .fe-field textarea { resize:vertical; min-height:80px; }
   .fe-field input[type="color"] { height:42px; padding:4px 8px; cursor:pointer; }
   .fe-field select { -webkit-appearance:auto; -moz-appearance:auto; appearance:auto; }
   
   .fe-button-fields { display:flex; flex-direction:column; gap:8px; }
   
   /* ── Radio / checkbox groups ── */
   .fe-radio-group { display:flex; gap:12px; flex-wrap:wrap; }
   .fe-radio { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:14px; color:#374151; }
   .fe-radio input[type="radio"], .fe-radio input[type="checkbox"] { accent-color:#111; width:16px; height:16px; cursor:pointer; }
   
   /* ── Image picker ── */
   .fe-image-picker { border:1px solid #e5e7eb; border-radius:10px; padding:16px; background:#fafafa; }
   .fe-image-preview { margin-bottom:12px; border-radius:8px; overflow:hidden; background:#f3f4f6; min-height:80px; display:flex; align-items:center; justify-content:center; }
   .fe-image-preview img { display:block; max-width:100%; height:auto; border-radius:6px; }
   .fe-image-placeholder { color:#9ca3af; font-size:13px; padding:30px; }
   .fe-image-actions { display:flex; gap:8px; }
   
   /* ── WYSIWYG overrides ── */
   .fe-wysiwyg-wrap { border-radius:8px; overflow:hidden; }
   .fe-wysiwyg-wrap .wp-editor-container { border:1px solid #d1d5db; border-radius:8px; }
   .fe-wysiwyg-wrap .mce-panel { border-color:#e5e7eb !important; }
   
   /* ── Form actions ── */
   .fe-form-actions { display:flex; gap:10px; padding-top:20px; border-top:1px solid #e5e7eb; margin-top:8px; }
   
   /* ── Buttons (slideout) ── */
   .fe-btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; font-size:14px; font-weight:500; border:none; border-radius:8px; cursor:pointer; transition:background .15s,color .15s; font-family:inherit; line-height:1.4; }
   .fe-btn:disabled { opacity:.6; cursor:not-allowed; }
   .fe-btn-primary { background:#111; color:#fff; }
   .fe-btn-primary:hover:not(:disabled) { background:#333; }
   .fe-btn-secondary { background:#e5e7eb; color:#374151; }
   .fe-btn-secondary:hover:not(:disabled) { background:#d1d5db; }
   .fe-btn-ghost { background:transparent; color:#6b7280; }
   .fe-btn-ghost:hover:not(:disabled) { background:#f3f4f6; color:#111; }
   
   /* ═══════════════════════════════════════════════
      Row toolbar — Edit / ↑ / ↓ / ×
      The TOOLBAR owns positioning and the reveal animation; the buttons are
      plain flex children. Never absolutely position .fe-edit-btn itself:
      that is what made Edit overlap Move/Delete.
      ═══════════════════════════════════════════════ */
   .fe-editable { position:relative; transition:outline .2s; }
   .fe-editable.fe-hover { outline:2px dashed rgba(0,0,0,.2); outline-offset:-2px; }
   
   .fe-row-toolbar {
     position:absolute; top:12px; right:12px; z-index:100;
     display:flex; align-items:stretch; gap:6px;
     opacity:0; transform:translateY(-4px); pointer-events:none;
     transition:opacity .2s, transform .2s;
   }
   .fe-editable:hover .fe-row-toolbar,
   .fe-editable.fe-hover .fe-row-toolbar,
   .fe-row-toolbar:focus-within {
     opacity:1; transform:translateY(0); pointer-events:auto;
   }
   
   .fe-row-toolbar button {
     display:inline-flex; align-items:center; justify-content:center; gap:6px;
     padding:8px 12px; font-size:13px; font-weight:500; line-height:1;
     font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
     color:#fff; background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
     border:1px solid rgba(255,255,255,.15); border-radius:8px;
     cursor:pointer; transition:background .15s; white-space:nowrap;
   }
   .fe-row-toolbar button:hover { background:rgba(0,0,0,.9); }
   .fe-row-toolbar button:focus-visible { outline:2px solid #fff; outline-offset:1px; }
   
   /* Move buttons: compact squares so the row stays tidy */
   .fe-row-toolbar .fe-move-btn { padding:8px 10px; font-size:14px; }
   
   /* Delete: same glassy style, red tint */
   .fe-row-toolbar .fe-delete-btn { background:rgba(176,0,32,.85); font-size:15px; padding:8px 11px; }
   .fe-row-toolbar .fe-delete-btn:hover { background:#b00020; }
   
   /* ── Insert points ("+ Add block") ── */
   /* Visible-but-subtle at rest so editors can actually find them; full opacity
      on hover AND on keyboard focus (focus-within). */
   .fe-insert-point { text-align:center; padding:6px 0; opacity:.25; transition:opacity .15s; }
   .fe-insert-point:hover, .fe-insert-point:focus-within, .fe-insert-point--empty { opacity:1; }
   .fe-insert-point--empty { padding:40px 0; }
   
   .fe-add-btn {
     display:inline-flex; align-items:center; gap:6px;
     background:#002042; color:#fff; border:0; border-radius:6px;
     padding:7px 16px; cursor:pointer; font-size:13px; font-weight:500;
     font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
     transition:background .15s;
   }
   .fe-add-btn:hover { background:#023a75; }
   .fe-add-btn:focus-visible { outline:2px solid #002042; outline-offset:2px; }
   
   /* ── Layout picker (Add Section slideout) ── */
   .fe-layout-picker { display:grid; gap:8px; }
   .fe-layout-picker .fe-layout-choice { justify-content:flex-start; text-transform:capitalize; }
   
   /* ── Missing-template notice (editors only) ── */
   .fe-missing-template { font-size:14px; border-radius:8px; }
   
   /* ── Toast ── */
   .fe-toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px); z-index:100000; background:#111; color:#fff; padding:12px 24px; border-radius:10px; font-size:14px; font-weight:500; box-shadow:0 8px 30px rgba(0,0,0,.2); opacity:0; transition:opacity .3s,transform .3s; pointer-events:none; }
   .fe-toast.is-visible { opacity:1; transform:translateX(-50%) translateY(0); }
   
   /* ── Responsive ── */
   @media (max-width:640px) {
     #fe-slideout { width:100vw; max-width:100vw; }
     #fe-slideout-body { padding:20px; }
     .fe-row-toolbar { top:8px; right:8px; gap:4px; }
     .fe-row-toolbar button { padding:6px 9px; font-size:12px; }
     /* Hover doesn't exist on touch: keep the toolbar visible so sections
        remain editable on mobile. */
     .fe-row-toolbar { opacity:1; transform:none; pointer-events:auto; }
     .fe-insert-point { opacity:1; }
   }
   
   /* ── Print ── */
   @media print {
     #fe-slideout, #fe-overlay, .fe-row-toolbar, .fe-insert-point,
     .fe-missing-template, .fe-toast { display:none !important; }
   }
/*# sourceMappingURL=frontend-editor.css.map */