/*
 * Aitoc Custom Product Designer — mobile text-colour picker fix.
 *
 * Root cause: the designer is built with jscolor. jscolor renders its
 * picker as a <div> tree inside `.cpd-color-button-picker` and handles
 * drag-to-pick via document-level `touchmove` listeners. The bundle
 * only sets `touch-action: none` on the Fabric canvas — it does NOT
 * set it on the jscolor picker DOM. On modern mobile browsers that
 * means:
 *   1. `touchstart` listeners on `document` are treated as passive by
 *      default, so jscolor's internal `preventDefault()` is ignored.
 *   2. The user's touch-drag on the hue slider / saturation pad is
 *      claimed by the browser as a scroll gesture before jscolor
 *      sees it, so the colour never changes.
 * On desktop the same code path is driven by `mousedown`/`mousemove`
 * which aren't affected by this, which is why it only breaks on
 * mobile.
 *
 * Fix: force `touch-action: none` on every interactive element that
 * jscolor builds inside `.cpd-color-button-picker`, raise the z-index
 * so it is not clipped by the reshuffled mobile sidebar, and give the
 * hit targets a comfortable size so taps register reliably.
 */

.cpd-color-button-picker,
.cpd-color-button-picker * {
    touch-action: none !important;
    -ms-touch-action: none !important;
}

.cpd-color-button-picker {
    z-index: 10000001;
}

.cpd-color-button-pad {
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

@media all and (max-width: 768px) {
    /*
     * The mobile layout stacks the sidebar beneath the canvas and
     * makes `.cpd-toolbar-container` a scrolling region. Taking the
     * jscolor picker out of that scroll context prevents it from being
     * clipped / scrolled away while the user is trying to drag on it.
     */
    .cpd-toolbar-container .cpd-color-button-picker {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000002;
    }

    .cpd-color-button-pad {
        min-width: 44px;
        min-height: 44px;
    }
}