/*
 * Shared responsive guard for Pickr popups.
 *
 * Builder styles contain historical positioning rules with different
 * transforms. This file is loaded last by both application layouts so every
 * Create/Edit page gets the same viewport-safe mobile behaviour.
 */

.pcr-app {
    box-sizing: border-box;
}

@media (max-width: 767.98px) {
    body > .pcr-app {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: min(22rem, calc(100vw - 1rem)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100vh - 1rem) !important;
        max-height: calc(100dvh - 1rem) !important;
        transform: translate(-50%, -50%) !important;
        transform-origin: center !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 100000 !important;
    }

    body > .pcr-app .pcr-selection,
    body > .pcr-app .pcr-interaction,
    body > .pcr-app .pcr-swatches {
        max-width: 100%;
        min-width: 0;
    }

    body > .pcr-app .pcr-interaction {
        row-gap: 0.25rem;
    }

    body > .pcr-app .pcr-interaction .pcr-result {
        flex: 1 1 7rem;
        width: auto;
        min-width: 0;
    }

    body > .pcr-app .pcr-interaction input {
        max-width: 100%;
    }
}

@media (max-width: 359.98px) {
    body > .pcr-app {
        width: calc(100vw - 0.75rem) !important;
        max-width: calc(100vw - 0.75rem) !important;
        font-size: 0.875rem;
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    body > .pcr-app {
        top: 0.5rem !important;
        max-height: calc(100dvh - 1rem) !important;
        transform: translateX(-50%) !important;
    }
}