/* ============================================
   Shared drag-to-reorder pattern (rd-drag-*)
   ============================================
   Native HTML5 drag-and-drop with a before/after drop indicator.
   The default reorder pattern — used by pc-faq-editor and
   pc-testimonial-selector. Apply `rd-drag-sortable` to each reorderable
   row and toggle `is-dragging` / `is-drop-before` / `is-drop-after` from
   the component; use `rd-drag-handle rd-icon-arrows-expand` for the grip. */

/* Grab handle (icon glyph applied via rd-icon-arrows-expand on the element) */
.rd-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    align-self: stretch;
    color: var(--rd-gray-400);
    cursor: move;
}

.rd-drag-handle:hover {
    color: var(--rd-gray-500);
}

.rd-drag-handle:active {
    cursor: move;
}

/* A reorderable row: dims while dragging and shows a before/after insertion line */
.rd-drag-sortable {
    position: relative;
}

.rd-drag-sortable.is-dragging {
    opacity: 0.4;
}

.rd-drag-sortable.is-drop-before::before,
.rd-drag-sortable.is-drop-after::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--rd-primary-active);
    border-radius: 2px;
    z-index: 2;
}

.rd-drag-sortable.is-drop-before::before {
    top: -6px;
}

.rd-drag-sortable.is-drop-after::after {
    bottom: -6px;
}