/**
 * PSDM Designer Bridge — resizable options panel + shipping-card layout.
 *
 * The PrintCart designer hard-codes a 420px fixed sidebar (.nbd-sidebar) and
 * offsets the canvas (.main) + toolbar (.nbd-toolbar) by that same 420px. We
 * drive all three off a single `--psdm-panel-w` CSS variable that the drag
 * handle in psdm-designer-panel.js updates, so the customer can widen the
 * options panel (taking space from the canvas) when the shipping cards or other
 * options need more room. psdm-designer-panel.js dispatches window.resize after
 * a change, which the designer listens to (reCalcViewPort) to reflow the canvas.
 *
 * Desktop only — the designer collapses the sidebar into a bottom bar on mobile.
 *
 * @package PSDM
 */

@media (min-width: 992px) {
    body.nbd-mode-modern {
        --psdm-panel-w: 420px;
    }

    body.nbd-mode-modern .nbd-sidebar {
        width: var(--psdm-panel-w, 420px) !important;
    }

    body.nbd-mode-modern .main {
        width: calc(100vw - var(--psdm-panel-w, 420px)) !important;
        left: var(--psdm-panel-w, 420px) !important;
    }

    body.nbd-mode-modern .nbd-toolbar {
        width: calc(100% - var(--psdm-panel-w, 420px)) !important;
        left: var(--psdm-panel-w, 420px) !important;
    }

    /* Drag handle, pinned to the panel's right edge (full height). */
    .psdm-panel-resizer {
        position: fixed;
        top: 54px;
        left: var(--psdm-panel-w, 420px);
        width: 12px;
        height: calc(100vh - 54px);
        margin-left: -6px;
        z-index: 101;
        cursor: col-resize;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        touch-action: none;
    }

    .psdm-panel-resizer::before {
        content: "";
        width: 2px;
        height: 44px;
        border-radius: 2px;
        background: #cbd2db;
        transition: background 0.15s ease, height 0.15s ease;
    }

    .psdm-panel-resizer:hover::before,
    body.psdm-panel-resizing .psdm-panel-resizer::before {
        background: var(--psdm-d-accent, #3b82f6);
        height: 72px;
    }

    /* While dragging: kill text selection + don't let the canvas swallow moves. */
    body.psdm-panel-resizing {
        cursor: col-resize !important;
        user-select: none !important;
    }

    body.psdm-panel-resizing .main {
        pointer-events: none;
    }

    /* While dragging, the panel must track the pointer 1:1 — the vendor's 0.4s
     * width transition on the sidebar would rubber-band the drag AND outlive
     * the resize events (so relayouts would measure a mid-animation width). */
    body.psdm-panel-resizing .nbd-sidebar,
    body.psdm-panel-resizing .main,
    body.psdm-panel-resizing .nbd-toolbar {
        transition: none !important;
    }

    /* The designer hard-codes the inner panel content to 345px (.tabs-content;
     * the icon nav keeps its own fixed width as the other flex child), so
     * widening .nbd-sidebar alone leaves the options narrow. Let the inner
     * content grow to fill the widened sidebar. */
    body.nbd-mode-modern .nbd-sidebar .tabs-content {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    body.nbd-mode-modern .nbd-sidebar .tabs-content .tab,
    body.nbd-mode-modern .nbd-sidebar .tab-main,
    body.nbd-mode-modern .nbd-sidebar .nbd-products,
    body.nbd-mode-modern .nbd-sidebar .nbd-product-tab,
    body.nbd-mode-modern .nbd-sidebar .nbd-main-product {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Shipping cards: the responsive grid (repeat(auto-fit, 150px)) + the full
 * "pill over pill" card treatment now come from RPS's rps-card-selected-state.css,
 * which the designer bridge loads via RPS_Zones_Product_Page::enqueue_for_product()
 * (RPS_Zones_Card_Selected_State_Assets::enqueue_assets()). That stylesheet covers
 * BOTH the grouped (.rps-shipping-group__items) and ungrouped
 * (.rps-shipping-options__list) layouts, so the designer cards render identically
 * to the product page. No designer-only grid override needed here anymore — a
 * !important override would only diverge the two contexts. */

/* Belt-and-suspenders: never let a card shrink below a legible width. */
body.nbd-mode-modern #nbo-options-wrap .rps-shipping-card {
    min-width: 0;
}

/* WooCommerce's variation price/stock box (.single_variation) is redundant in
 * the designer — RPS shows pricing in the shipping cards — and renders as an
 * empty box when the price is suppressed. Hide it. */
body.nbd-mode-modern #nbo-options-wrap .single_variation {
    display: none !important;
}