/* =========================================================
   ASIRI PACKAGE SHOWCASE — RESPONSIVE ORDER FIX v1.1.0

   IMPORTANT:
   - CSS ONLY. No JavaScript DOM re-parenting.
   - Navigation remains in its original .apw-right-panel markup.
   - <= 1366px visual order:
       1) RIGHT CONTENT
       2) LEFT CONTENT
       3) NAVIGATION
   - <= 767px navigation is centered.

   Keeping the nav DOM stable prevents the desktop/laptop hover
   shake caused by moving the same interactive element between
   the right and left panels.
========================================================= */

@media (max-width: 1366px) {
    .asiri-package-taxonomy-widget .apw-slide {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;

        /* Reserve a dedicated row for the absolutely positioned nav. */
        padding-bottom: 86px !important;
    }

    .asiri-package-taxonomy-widget .apw-right-panel {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;

        /* Let .apw-slide become the nav positioning reference. */
        position: static !important;
    }

    .asiri-package-taxonomy-widget .apw-right-inner {
        width: 100% !important;
        max-width: 100% !important;

        /* Do not trap the navigation inside this block. */
        position: static !important;
    }

    .asiri-package-taxonomy-widget .apw-left-panel {
        order: 2 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /*
     * NAVIGATION
     * Keep the element in its ORIGINAL DOM parent.
     * We only position it visually below both content blocks.
     */
    html body .asiri-package-taxonomy-widget .apw-slide .apw-navigation {
        position: absolute !important;
        z-index: 9999 !important;
        left: auto !important;
        right: 20px !important;
        top: auto !important;
        bottom: 20px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        width: auto !important;
        max-width: none !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;

        /* Geometry must never change on hover/focus. */
        transform: none !important;
        translate: none !important;
        scale: none !important;
        rotate: none !important;
        animation: none !important;
        pointer-events: auto !important;
    }

    html body .asiri-package-taxonomy-widget .apw-slide .apw-navigation:hover,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-navigation:focus,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-navigation:focus-within,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-navigation:active {
        left: auto !important;
        right: 20px !important;
        top: auto !important;
        bottom: 20px !important;
        margin: 0 !important;
        transform: none !important;
        translate: none !important;
        scale: none !important;
        rotate: none !important;
        animation: none !important;
    }

    /* Lock each control's box; only visual color changes may occur. */
    html body .asiri-package-taxonomy-widget .apw-slide .apw-nav-btn,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-nav-btn:hover,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-nav-btn:focus,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-nav-btn:focus-visible,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-nav-btn:active {
        position: relative !important;
        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        transform: none !important;
        translate: none !important;
        scale: none !important;
        rotate: none !important;
        animation: none !important;
        filter: none !important;
    }
}

/* MOBILE ONLY — center the stable navigation row. */
@media (max-width: 767px) {
    .asiri-package-taxonomy-widget .apw-slide {
        padding-bottom: 82px !important;
    }

    html body .asiri-package-taxonomy-widget .apw-slide .apw-navigation,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-navigation:hover,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-navigation:focus,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-navigation:focus-within,
    html body .asiri-package-taxonomy-widget .apw-slide .apw-navigation:active {
        left: 0 !important;
        right: 0 !important;
        bottom: 18px !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
        transform: none !important;
    }
}