/**
 * SailWP Co-pilot — frontend inline-edit overlay (Sortable.js edition).
 *
 * Loaded on _swcp_designed=1 pages for users with edit_post. Keeps the
 * visual footprint quiet — outlines and toolbars only on hover, so the
 * Co-pilot design itself stays the hero of the page.
 */

/* Text-leaf hover halo + active-edit state. Click any heading or
   paragraph to switch it into a contenteditable. */
.swcp-edit-enabled :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, span, a, button, label, em, strong, time, small, figcaption, summary).swcp-edit-hover-text {
    outline: 1.5px dashed rgba(56, 132, 255, 0.7) !important;
    outline-offset: 2px !important;
    cursor: text !important;
    border-radius: 2px;
    transition: outline-color 0.12s ease;
}
.swcp-edit-active-text {
    outline: 2px solid rgba(56, 132, 255, 0.95) !important;
    outline-offset: 3px !important;
    border-radius: 2px;
    cursor: text !important;
    background: rgba(56, 132, 255, 0.08);
}

/* Sortable cues — every detected block gets cursor:grab on hover so
   the editor sees it's draggable. Sortable.js drives the actual lift. */
.swcp-edit-enabled .swcp-edit-sort-item {
    cursor: grab;
    transition: outline-color 0.12s ease, box-shadow 0.12s ease;
}
.swcp-edit-enabled .swcp-edit-sort-item:hover {
    outline: 1.5px dashed rgba(56, 132, 255, 0.45);
    outline-offset: 4px;
}
/* Suppress the outline on a parent sort-item when one of its inner
   sort-items is hovered. Without this, hovering Mercury's text-cell
   draws TWO coral dashes — one around the cell, one around the whole
   Mercury card — which Joost called "twee conflicteerende dingen" on
   2026-05-15 13:48. Only the deepest hovered item keeps its outline. */
.swcp-edit-enabled .swcp-edit-sort-item:has(.swcp-edit-sort-item:hover) {
    outline: none !important;
}

/* Sortable lifecycle classes. The library swaps these on the element
   that's actively being moved + the placeholder it leaves behind. */
.swcp-edit-chosen {
    cursor: grabbing !important;
}
.swcp-edit-dragging {
    opacity: 0.85 !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    z-index: 2147483646;
}
.swcp-edit-ghost {
    opacity: 0.35 !important;
    outline: 2px dashed var(--sw-rail-edit-blue, #3884ff) !important;
    outline-offset: 4px !important;
    background: rgba(56, 132, 255, 0.08) !important;
}

/* While a drag is active, force grabbing cursor everywhere and kill
   text-selection so the user's drag feels deliberate. */
body.swcp-edit-dragging-active,
body.swcp-edit-dragging-active * {
    cursor: grabbing !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Brief flash on the just-moved block so editors see "yes, it landed". */
.swcp-edit-just-dropped {
    animation: swcp-edit-dropped-flash 0.7s ease-out;
}
@keyframes swcp-edit-dropped-flash {
    0%   { box-shadow: 0 0 0 0  rgba(56, 132, 255, 0.85); }
    100% { box-shadow: 0 0 0 24px rgba(56, 132, 255, 0); }
}

/* Hover toolbar — left-gutter pill with drag-grip + up + down + delete.
   The arrows are foolproof for users who can't or don't want to drag.
   Fixed positioning so we drive it from JS in viewport coords without
   battling document-scroll math. */
.swcp-edit-toolbar {
    position: fixed;
    z-index: 2147483645;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: rgba(26, 26, 46, 0.94);
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.swcp-edit-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: transparent;
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}
.swcp-edit-toolbar button:hover {
    background: var(--sw-rail-edit-blue, #3884ff);
}
.swcp-edit-toolbar button:active {
    transform: scale(0.92);
}
.swcp-edit-tb-handle {
    cursor: grab !important;
}
.swcp-edit-tb-handle:active {
    cursor: grabbing !important;
}
/* Delete: subtle white × on hover-red. Joost 2026-05-17 v0.23.5: the
   always-red disc from v0.23.4 felt "agressief" — destructive intent
   lives in the icon + tooltip, not in a permanent red wash. */
.swcp-edit-tb-delete:hover {
    background: #d4453a !important;
}

/* Generic tooltip — any toolbar button with a data-tip attribute gets
   a small dark label below on hover. Keeps the buttons readable for
   first-time users without scattering tooltip rules per button. */
.swcp-edit-toolbar button[data-tip] {
    position: relative;
}
.swcp-edit-toolbar button[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 26, 46, 0.94);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}
.swcp-edit-toolbar svg {
    display: block;
}

/* Soft fade-out when a block is being removed via the × button. */
.swcp-edit-removing {
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0 !important;
    transform: scale(0.96) !important;
    pointer-events: none !important;
}

/* Background-colour swatch popup. Opens on double-click of any
   bg-bearing element, anchored to cursor position. 8 brand swatches +
   a "custom" colour button that opens the native picker. Click anywhere
   outside to close. Joost 2026-05-17. */
.swcp-edit-bg-popup {
    position: fixed;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 46, 0.10);
    border-radius: 12px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}
.swcp-edit-bg-swatch {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(26, 26, 46, 0.18);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.swcp-edit-bg-swatch:hover,
.swcp-edit-bg-swatch:focus-visible {
    transform: scale(1.18);
    box-shadow: 0 0 0 2px rgba(232, 132, 92, 0.32);
    outline: none;
}
.swcp-edit-bg-swatch-custom {
    background: #ffffff;
    color: #6b6258;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Text formatting popup — appears above the selection while a
   contenteditable text leaf is active. Bold + Italic + Link. Uses
   fixed positioning so it can sit on top of any section regardless
   of overflow rules. */
.swcp-edit-format-popup {
    position: fixed;
    z-index: 2147483646;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: rgba(26, 26, 46, 0.96);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.swcp-edit-format-popup button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    background: transparent;
    color: #fff;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.12s ease, transform 0.12s ease;
    -webkit-appearance: none;
    appearance: none;
}
.swcp-edit-format-popup button:hover {
    background: var(--sw-rail-edit-blue, #3884ff);
}
.swcp-edit-format-popup button:active {
    transform: scale(0.92);
}
.swcp-edit-format-popup b {
    font-weight: 800;
}
.swcp-edit-fp-i-glyph {
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 600;
}
.swcp-edit-format-popup svg {
    display: block;
}

/* Status chip — bottom-LEFT, never covers the rail (right). */
.swcp-edit-status {
    position: fixed;
    bottom: 16px;
    left: 16px;
    z-index: 2147483645;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    background: rgba(26, 26, 46, 0.86);
    color: #fff;
    border-radius: 999px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.2s ease;
    pointer-events: auto;
    max-width: calc(100vw - 32px);
}
.swcp-edit-status--active {
    background: rgba(56, 132, 255, 0.95);
}
.swcp-edit-status-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}
.swcp-edit-status-toggle,
.swcp-edit-status-undo {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s ease, opacity 0.12s ease;
}
.swcp-edit-status-toggle:hover,
.swcp-edit-status-undo:hover {
    background: rgba(255, 255, 255, 0.28);
}
.swcp-edit-status-undo {
    width: 28px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.swcp-edit-status-undo.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.swcp-edit-status-undo.is-disabled:hover {
    background: rgba(255, 255, 255, 0.16);
}
.swcp-edit-status-undo svg {
    display: block;
}

/* When editing is paused, drop visual cues so the page reads exactly
   like the public live site. */
.swcp-edit-disabled .swcp-edit-sort-item {
    cursor: default !important;
    outline: none !important;
}
.swcp-edit-disabled .swcp-edit-toolbar {
    display: none !important;
}

/* v0.20.51 — Background palette, image Replace, and shape Colour
   overlays were all removed here. Inline editor surface is now just:
   text edit (bold/italic/link via the format popup), drag, delete. */

/* Phone tweaks */
@media screen and (max-width: 720px) {
    .swcp-edit-status {
        bottom: 12px;
        left: 12px;
        font-size: 12px;
        padding: 6px 8px 6px 12px;
    }
    .swcp-edit-status-text { max-width: 60vw; }
    .swcp-edit-toolbar button { width: 30px; height: 30px; }
}

/* ===== Insert-zones: persistent overlay strips between every pair of
   top-level sections, plus one before the first and one after the last.
   Hit area is 20px tall so the cursor reliably catches it. The line +
   "+" only appear on hover, so a quiet page stays quiet until you
   reach for the gallery. Joost 2026-05-17. ===== */
.swcp-edit-insert-zone {
    position: fixed;
    z-index: 2147483644;
    height: 20px;
    pointer-events: auto;
    cursor: pointer;
}
.swcp-edit-insert-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(232, 132, 92, 0.55), transparent);
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}
.swcp-edit-insert-zone:hover .swcp-edit-insert-line { opacity: 1; }

.swcp-edit-insert-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: #e8845c;
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(232, 132, 92, 0.35);
    opacity: 0;
    transition: opacity 0.14s ease, transform 0.14s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.swcp-edit-insert-zone:hover .swcp-edit-insert-plus {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.swcp-edit-insert-plus:hover {
    transform: translate(-50%, -50%) scale(1.15);
    background: #d4673c;
    box-shadow: 0 6px 18px rgba(232, 132, 92, 0.5);
}
.swcp-edit-insert-plus svg { display: block; }

/* ===== Pattern gallery popup ===== */
.swcp-edit-pattern-gallery {
    position: fixed;
    z-index: 2147483647;
    background: #ffffff;
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(26, 26, 46, 0.22),
        0 0 0 1px rgba(26, 26, 46, 0.06);
    display: none;
    flex-direction: column;
    overflow: hidden;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: swcp-pg-in 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes swcp-pg-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.swcp-edit-pg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(26, 26, 46, 0.08);
}
.swcp-edit-pg-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
}
.swcp-edit-pg-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: rgba(26, 26, 46, 0.55);
    cursor: pointer;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}
.swcp-edit-pg-close:hover {
    background: rgba(26, 26, 46, 0.06);
    color: #1a1a2e;
}
.swcp-edit-pg-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 20px;
}
.swcp-edit-pg-loading,
.swcp-edit-pg-empty {
    padding: 40px 12px;
    text-align: center;
    color: rgba(26, 26, 46, 0.55);
    font-size: 14px;
}
.swcp-edit-pg-cat { margin-bottom: 22px; }
.swcp-edit-pg-cat:last-child { margin-bottom: 4px; }
.swcp-edit-pg-cat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(26, 26, 46, 0.55);
    margin-bottom: 10px;
    padding: 0 2px;
}
.swcp-edit-pg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.swcp-edit-pg-card {
    appearance: none;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 46, 0.10);
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
    font: inherit;
    color: inherit;
    text-align: left;
}
.swcp-edit-pg-card:hover {
    border-color: #e8845c;
    box-shadow: 0 8px 18px rgba(232, 132, 92, 0.18);
    transform: translateY(-2px);
}
.swcp-edit-pg-card-preview {
    width: 100%;
    height: 140px;
    overflow: hidden;
    background: #faf7f1;
    position: relative;
    border-bottom: 1px solid rgba(26, 26, 46, 0.05);
}
.swcp-edit-pg-card-preview-inner {
    /* Render the real pattern HTML at quarter-scale so the thumbnail
       reflects what the user is about to insert. transform-origin top-
       left so it tucks into the corner cleanly. */
    width: 400%;
    transform: scale(0.25);
    transform-origin: top left;
    pointer-events: none;
}
.swcp-edit-pg-card-name {
    padding: 10px 12px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a2e;
    line-height: 1.3;
}

/* Halo on the just-inserted section so the user spots it after scroll. */
.swcp-edit-just-inserted {
    animation: swcp-edit-just-inserted 1.5s ease;
}
@keyframes swcp-edit-just-inserted {
    0%   { box-shadow: 0 0 0 0   rgba(232, 132, 92, 0); }
    20%  { box-shadow: 0 0 0 10px rgba(232, 132, 92, 0.35); }
    100% { box-shadow: 0 0 0 0   rgba(232, 132, 92, 0); }
}
