/*
 * Overzeas mobile swipe and multi-image dots.
 * Adjust the pill opacity in the owl-dots background rgba() value.
 */
@media (max-width: 1024px) {
    .ar-ai-container,
    .ar-ai-container a,
    .ar-ai-container img {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        user-drag: none;
    }

    .ar-ai-container {
        touch-action: pan-y;
    }

    .ar-ai-container.owl-carousel {
        position: absolute;
        z-index: 2 !important;
    }

    .ar-ai-container.owl-carousel .owl-dots {
        position: absolute;
        left: 50%;
        right: auto;
        top: auto !important;
        bottom: 0 !important;
        transform: translateX(-50%);
        z-index: 4;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: auto;
        max-width: calc(100% - 24px);
        margin: 0;
        padding: 4px 6px;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.05);
        pointer-events: none;
    }

    .ar-ai-container.owl-carousel .owl-dots .owl-dot {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 6px;
        height: 6px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0;
        background: transparent;
    }

    .ar-ai-container.owl-carousel .owl-dots .owl-dot span {
        display: block;
        width: 5px !important;
        height: 5px !important;
        margin: 0 !important;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.58) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
        transition: transform 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
    }

    .ar-ai-container.owl-carousel .owl-dots .owl-dot.active span {
        background: #ffffff !important;
        transform: scale(1.25);
    }
}