/* Triplist list view — drag reorder handles (mobile-friendly) */

/* Hidden unless list view (mobile) or desktop reorder mode */
.triplist-content-grid:not(.list-view) .triplist-list-drag-handle {
    display: none !important;
}

body.dnd-places-reorder-mode .triplist-content-grid .moodboard-holder.dnd-list-reorder-enabled .triplist-list-drag-handle {
    display: inline-flex !important;
}

/* Reorder mode: outline only — do not change card layout/spacing */
body.dnd-places-reorder-mode .triplist-content-grid .moodboard-holder.dnd-list-reorder-enabled {
    outline: 2px solid rgba(12, 184, 223, 0.55);
    outline-offset: 3px;
    border-radius: 12px;
}

body.dnd-places-reorder-mode .triplist-content-grid:not(.list-view) .moodboard-holder.dnd-list-reorder-enabled {
    position: relative;
    cursor: grab;
    touch-action: none;
    -webkit-user-drag: none;
}

body.dnd-places-reorder-mode .triplist-content-grid:not(.list-view) .moodboard-holder.dnd-list-reorder-enabled.dnd-list-drag-pending,
body.dnd-places-reorder-mode .triplist-content-grid:not(.list-view) .moodboard-holder.dnd-list-reorder-enabled.dnd-list-dragging {
    cursor: grabbing;
}

/* Whole card (photo, video, title) is the drag surface — only menus/book stay clickable */
body.dnd-places-reorder-mode .moodboard-holder.dnd-list-reorder-enabled,
body.dnd-places-reorder-mode .triplist-content-grid.list-view .moodboard-holder.dnd-list-reorder-enabled {
    pointer-events: auto !important;
    touch-action: none;
}

body.dnd-places-reorder-mode .moodboard-holder.dnd-list-reorder-enabled *,
body.dnd-places-reorder-mode .triplist-content-grid.list-view .moodboard-holder.dnd-list-reorder-enabled * {
    pointer-events: none !important;
}

body.dnd-places-reorder-mode .moodboard-holder.dnd-list-reorder-enabled .triplist-list-drag-handle,
body.dnd-places-reorder-mode .moodboard-holder.dnd-list-reorder-enabled .triplist-card-menu,
body.dnd-places-reorder-mode .moodboard-holder.dnd-list-reorder-enabled .triplist-card-menu-toggle,
body.dnd-places-reorder-mode .moodboard-holder.dnd-list-reorder-enabled .triplist-book,
body.dnd-places-reorder-mode .moodboard-holder.dnd-list-reorder-enabled .triplist-book-mobile {
    pointer-events: auto !important;
}

/* During reorder, use CSS grid so DOM order matches visual L→R / T→B (not multicol masonry). */
body.dnd-places-reorder-mode #triplist-main-grid.triplist-content-grid.dnd-list-reorder-grid-flow:not(.list-view) {
    display: grid !important;
    column-count: unset !important;
    column-gap: unset !important;
    column-fill: unset !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

@media (min-width: 700px) {
    body.dnd-places-reorder-mode #triplist-main-grid.triplist-content-grid.dnd-list-reorder-grid-flow:not(.list-view) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    body.dnd-places-reorder-mode #triplist-main-grid.triplist-content-grid.dnd-list-reorder-grid-flow:not(.list-view) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

body.dnd-places-reorder-mode #triplist-main-grid.dnd-list-reorder-grid-flow:not(.list-view) .moodboard-holder:not(.filtered-hidden) {
    break-inside: unset !important;
    margin-bottom: 0 !important;
    width: auto !important;
}

body.dnd-places-reorder-mode #triplist-main-grid.dnd-list-reorder-grid-flow:not(.list-view) .dnd-trip-day-section {
    grid-column: 1 / -1;
}

/* Grid drop target — indicator only (placeholder stays put during drag) */
body.dnd-places-reorder-mode .triplist-content-grid:not(.list-view) .moodboard-holder.dnd-list-drop-before {
    box-shadow: inset 0 0 0 2px rgba(12, 184, 223, 0.85), 0 0 0 2px rgba(12, 184, 223, 0.35);
}

body.dnd-places-reorder-mode .triplist-content-grid:not(.list-view) .moodboard-holder.dnd-list-reorder-enabled .triplist-list-drag-handle {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 200;
    pointer-events: auto !important;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Desktop reorder: overlay handle so list rows do not reflow */
@media (min-width: 769px) {
    body.dnd-places-reorder-mode .triplist-content-grid.list-view .moodboard-holder.dnd-list-reorder-enabled {
        position: relative;
    }

    body.dnd-places-reorder-mode .triplist-content-grid.list-view .moodboard-holder.dnd-list-reorder-enabled .triplist-list-drag-handle {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 200;
        pointer-events: auto !important;
        flex: none !important;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }
}

.triplist-content-grid.list-view .triplist-list-drag-handle {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
}

/* Expanded touch target without changing dot visual size */
.triplist-content-grid.list-view .triplist-list-drag-handle::before {
    content: '';
    position: absolute;
    inset: -12px -10px;
}

.triplist-list-drag-handle:active {
    cursor: grabbing;
}

.moodboard-holder.dnd-list-drag-pending .triplist-list-drag-handle {
    opacity: 0.75;
}

.triplist-list-drag-handle__dots {
    display: grid;
    grid-template-columns: repeat(2, 4px);
    grid-template-rows: repeat(3, 4px);
    gap: 3px;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.triplist-list-drag-handle__dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    display: block;
}

/* Drop gap — a lightweight element moved in the DOM to the slot under the
   finger. It shows exactly where the card will land (within a day or another). */
.dnd-list-reorder-placeholder {
    box-sizing: border-box;
    width: 100% !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    contain: layout;
    border-radius: 8px;
    margin-bottom: 6px !important;
    background: rgba(12, 184, 223, 0.10);
    border: 1px dashed rgba(12, 184, 223, 0.45);
    pointer-events: none;
}

/* Masonry grid: placeholder participates in column flow like a real card */
body.dnd-places-reorder-mode .triplist-content-grid:not(.list-view) .dnd-list-reorder-placeholder--grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    break-inside: avoid-column !important;
    page-break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    margin: 0 0 14px !important;
    border-radius: 12px;
    background: rgba(12, 184, 223, 0.14);
    border: 2px dashed rgba(12, 184, 223, 0.55);
    transition: none;
    contain: layout style;
}

body.dnd-places-reorder-mode .triplist-content-grid.dnd-list-reorder-active {
    -webkit-user-select: none;
    user-select: none;
}

/* FLIP shift — siblings glide into place when the drop slot moves */
body.dnd-places-reorder-mode .triplist-content-grid.dnd-list-reorder-active .moodboard-holder.dnd-list-reorder-shift,
.triplist-content-grid.list-view.dnd-list-reorder-active .moodboard-holder.dnd-list-reorder-shift {
    will-change: transform;
    z-index: 2;
}

body.dnd-places-reorder-mode .triplist-content-grid.dnd-list-reorder-active .moodboard-holder:not(.dnd-list-drag-lifted):not(.dnd-list-reorder-placeholder):not(.dnd-list-reorder-shift) {
    transition: none;
}

/* Lifted card follows finger on the GPU. Opaque background + rounded corners so
   the rows underneath never bleed through while dragging (contained card look).
   Selector is intentionally high-specificity to beat the template's
   `.triplist-content-grid.list-view .moodboard-holder { background: transparent !important }`. */
/* During reorder, keep trip cards below the Done bar (template may raise z-index for menus). */
body.dnd-places-reorder-mode #triplist-main-grid .moodboard-holder:not(.dnd-list-drag-lifted) {
    z-index: 0 !important;
}

body.dnd-places-reorder-mode .moodboard-holder.dnd-list-drag-lifted,
body.dnd-places-reorder-mode .moodboard-holder.dnd-list-drag-lifted.dnd-list-dragging,
.triplist-content-grid.list-view .moodboard-holder.dnd-list-drag-lifted,
.triplist-content-grid.list-view .moodboard-holder.dnd-list-drag-lifted.dnd-list-dragging {
    position: fixed !important;
    z-index: 10050 !important;
    margin: 0 !important;
    pointer-events: none !important;
    will-change: transform, left, top;
    transition: none !important;
    opacity: 1 !important;
    background: #16181d !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55) !important;
    transition: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Dim siblings slightly while dragging so the lifted card stands out. */
body.dnd-places-reorder-mode .triplist-content-grid.dnd-list-reorder-active .moodboard-holder:not(.dnd-list-drag-lifted):not(.dnd-list-reorder-placeholder),
.triplist-content-grid.list-view.dnd-list-reorder-active .moodboard-holder:not(.dnd-list-drag-lifted):not(.dnd-list-reorder-placeholder) {
    opacity: 0.94;
}

/* Target day section highlight while dragging a card over another day. */
.dnd-trip-day-section.dnd-list-drop-target {
    border-radius: 12px;
    background: rgba(12, 184, 223, 0.16) !important;
    box-shadow: inset 0 0 0 2px rgba(12, 184, 223, 0.7);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

body.dnd-triplist-list-drag-active {
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
    overscroll-behavior: none;
}

body.dnd-triplist-list-drag-active .triplist-content-grid.list-view,
.triplist-content-grid.list-view.dnd-list-reorder-active {
    touch-action: none;
    overscroll-behavior: none;
}

@media (max-width: 991px) {
    #triplist-main-grid.triplist-content-grid.list-view {
        background: rgba(255, 255, 255, 0.06);
        border-radius: 16px;
        padding: 8px 10px;
        box-sizing: border-box;
    }

    #triplist-main-grid.triplist-content-grid.list-view .dnd-trip-day-section {
        margin-top: 4px;
        margin-bottom: 2px;
    }
}

/* Reduced motion: instant shifts, no settle animation */
.triplist-content-grid.dnd-list-reorder-reduced-motion.dnd-list-reorder-active .moodboard-holder.dnd-list-reorder-shift,
.triplist-content-grid.dnd-list-reorder-reduced-motion.dnd-list-reorder-active .dnd-list-reorder-placeholder {
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .dnd-list-reorder-placeholder,
    .moodboard-holder.dnd-list-drag-lifted,
    .moodboard-holder.dnd-list-reorder-shift,
    .triplist-content-grid.list-view.dnd-list-reorder-active .moodboard-holder:not(.dnd-list-drag-lifted):not(.dnd-list-reorder-placeholder) {
        transition: none !important;
    }
}

/* Desktop explicit reorder mode (opened from day "…" menu) */
body.dnd-places-reorder-mode {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

body.dnd-places-reorder-mode #triplist-main-grid,
body.dnd-places-reorder-mode #dnd-triplist-wrapper {
    position: relative;
    z-index: 0;
}

.dnd-places-reorder-done-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10120 !important;
    isolation: isolate;
    pointer-events: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(
        180deg,
        rgba(10, 10, 12, 0) 0%,
        rgba(10, 10, 12, 0.82) 28%,
        rgba(10, 10, 12, 0.97) 100%
    );
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}

.dnd-places-reorder-done-bar[hidden] {
    display: none !important;
}

.dnd-places-reorder-done-bar__btn {
    appearance: none;
    -webkit-appearance: none;
    width: min(960px, calc(100vw - 32px));
    min-width: min(720px, calc(100vw - 32px));
    max-width: 960px;
    padding: 14px 24px;
    border-radius: 12px;
    border: 1px solid rgba(12, 184, 223, 1);
    background: rgba(12, 184, 223, 0.95);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.dnd-places-reorder-done-bar__btn:hover:not(:disabled) {
    background: rgba(12, 184, 223, 1);
}

.dnd-places-reorder-done-bar.is-busy .dnd-places-reorder-done-bar__btn {
    opacity: 0.7;
    pointer-events: none;
}

@media (max-width: 768px) {
    .dnd-places-reorder-done-bar__btn {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

body.dnd-places-reorder-mode .dnd-trip-days__pill,
body.dnd-places-reorder-mode .triplist-view-switcher {
    pointer-events: none;
    opacity: 0.55;
}