/* =========================================================
   JNN Framework v5.5.6
   QKM BUSINESS DROPDOWN
   STEP-9 — BASIC DROPDOWN CREATION
   ========================================================= */

.jnn-business-overlay[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.jnn-business-overlay:not([hidden]) {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/*
 * Step-12 temporary position.
 * Step-13 में इसे replace किया जाएगा।
 */

.jnn-business-overlay {
    position: fixed !important;

    display: flex !important;
    flex-direction: column !important;

    z-index:  2147483000  !important;

    width:
        var(--jnn-biz-dd-width) !important;

    max-width:
        calc(100vw - 16px) !important;

    box-sizing:
        border-box !important;

    overflow: hidden !important;

    background:
        var(--jnn-biz-dd-bg) !important;

    border:
        var(--jnn-biz-dd-border-width)
        solid
        var(--jnn-biz-dd-border-color) !important;

    border-radius:
        var(--jnn-biz-dd-border-radius) !important;

    box-shadow:
        var(--jnn-biz-dd-shadow-x)
        var(--jnn-biz-dd-shadow-y)
        var(--jnn-biz-dd-shadow-blur)
        var(--jnn-biz-dd-shadow-spread)
        var(--jnn-biz-dd-shadow-color) !important;
}

/* =========================================================
   STEP-10 — PARENT “सभी कारोबार खबरें” ROW
   ========================================================= */

.jnn-business-overlay-parent {
    display: flex !important;
flex: 0 0 auto !important;
    align-items: center !important;

    width: 100% !important;

    box-sizing:
        border-box !important;

    margin: 0 !important;

    color: inherit !important;

    text-decoration:
        none !important;
}

/* =========================================================
   STEP-11 — CHILD CATEGORY ROWS
   ========================================================= */

.jnn-business-overlay-list {
    display: block !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior:
        contain !important;

    -webkit-overflow-scrolling:
        touch;
}


.jnn-business-overlay-item {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.jnn-business-overlay-item > a {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    box-sizing:
        border-box !important;

    margin: 0 !important;

    color: inherit !important;

    text-decoration:
        none !important;
}

/* =========================================================
   STEP-16 — ZERO-SHIFT ARROW ENGINE
   ========================================================= */

:root {
    /* =====================================================
       STEP-16 — ARROW CONTROLS
       ===================================================== */

    --jnn-biz-arrow-space:
        16px;

    --jnn-biz-arrow-right:
        2px;

    --jnn-biz-arrow-size:
        10px;

    --jnn-biz-arrow-color:
        currentColor;


    /* =====================================================
       STEP-17 — CHILD TYPOGRAPHY
       ===================================================== */

    --jnn-biz-dd-font-size:
        13px;

    --jnn-biz-dd-font-weight:
        500;

    --jnn-biz-dd-line-height:
        1.35;

    --jnn-biz-dd-text-color:
        #222222;


    /* =====================================================
       STEP-17 — CHILD SPACING
       ===================================================== */

    --jnn-biz-dd-row-min-height:
        35px;

    --jnn-biz-dd-pad-y:
        0px;

    --jnn-biz-dd-pad-x:
        8px;


    /* =====================================================
       STEP-17 — PARENT TYPOGRAPHY
       ===================================================== */

    --jnn-biz-dd-parent-font-size:
        13px;

    --jnn-biz-dd-parent-font-weight:
        700;

    --jnn-biz-dd-parent-line-height:
        1.35;

    --jnn-biz-dd-parent-color:
        #c70000;


    /* =====================================================
       STEP-17 — PARENT SPACING
       ===================================================== */

    --jnn-biz-dd-parent-min-height:
        38px;

    --jnn-biz-dd-parent-pad-y:
        8px;

    --jnn-biz-dd-parent-pad-x:
        12px;
        
        
    /* Step-18 — Border, background and shadow */
    --jnn-biz-dd-width: 160px;
    --jnn-biz-dd-bg: #ffffff;

    --jnn-biz-dd-border-width: 1px;
    --jnn-biz-dd-border-color: #d8d8d8;
    --jnn-biz-dd-border-radius: 4px;

    --jnn-biz-dd-shadow-x: 0px;
    --jnn-biz-dd-shadow-y: 4px;
    --jnn-biz-dd-shadow-blur: 14px;
    --jnn-biz-dd-shadow-spread: 0px;
    --jnn-biz-dd-shadow-color: rgba(0, 0, 0, 0.18);

    --jnn-biz-dd-parent-bg: #f7f7f7;

    --jnn-biz-dd-divider-width: 1px;
    --jnn-biz-dd-divider-color: #eeeeee;
   
    /* Step-19 — Hover, focus and tap feedback */
    --jnn-biz-dd-hover-bg: #f2f2f2;
    --jnn-biz-dd-hover-color: #c70000;

    --jnn-biz-dd-focus-color: #c70000;
    --jnn-biz-dd-focus-width: 2px;
    --jnn-biz-dd-focus-offset: -2px;

    --jnn-biz-dd-tap-bg: #e9e9e9;
    --jnn-biz-dd-transition-duration: 140ms;
    
    /* Step-20 — Responsive controls */
    --jnn-biz-dd-mobile-edge-gap: 8px;
    --jnn-biz-dd-mobile-width: 160px;

    --jnn-biz-dd-small-width: 146px;
    --jnn-biz-dd-small-font-size: 12px;
    --jnn-biz-dd-small-parent-font-size: 12px;
    --jnn-biz-dd-small-row-min-height: 34px;
    --jnn-biz-dd-small-parent-min-height: 36px;
    
}


/* =========================================================
   BUSINESS TRIGGER LINK
   ========================================================= */

.jnn-quick-menu-list
> li.jnn-business-trigger
> a {
    position:
        relative !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    /*
     * Closed state से ही arrow की जगह reserve।
     */

    padding-right:
        var(
            --jnn-biz-arrow-space
        ) !important;
}


/* =========================================================
   CLOSED STATE — DOWN ARROW
   ========================================================= */

.jnn-quick-menu-list
> li.jnn-business-trigger
> a::after {
    content:
        "â–¾";

    position:
        absolute !important;

    top:
        50% !important;

    right:
        var(
            --jnn-biz-arrow-right
        ) !important;

    width:
        10px !important;

    min-width:
        10px !important;

    transform:
        translateY(
            -50%
        ) !important;

    color:
        var(
            --jnn-biz-arrow-color
        ) !important;

    font-size:
        var(
            --jnn-biz-arrow-size
        ) !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-align:
        center !important;

    /*
     * Arrow tap को block नहीं करेगा।
     */

    pointer-events:
        none !important;
}


/* =========================================================
   OPEN STATE — UP ARROW
   ========================================================= */

.jnn-quick-menu-list
> li.jnn-business-trigger.jnn-business-is-open
> a::after {
    content:
        "â–´";
}

/* =========================================================
   STEP-17 — TYPOGRAPHY AND SPACING CONTROLS
   ========================================================= */


/* =========================================================
   PARENT “सभी कारोबार खबरें”
   ========================================================= */

.jnn-business-overlay-parent {
    min-height:
        var(
            --jnn-biz-dd-parent-min-height
        ) !important;

    padding:
        var(
            --jnn-biz-dd-parent-pad-y
        )
        var(
            --jnn-biz-dd-parent-pad-x
        ) !important;

    color:
        var(
            --jnn-biz-dd-parent-color
        ) !important;

    font-size:
        var(
            --jnn-biz-dd-parent-font-size
        ) !important;

    font-weight:
        var(
            --jnn-biz-dd-parent-font-weight
        ) !important;

    line-height:
        var(
            --jnn-biz-dd-parent-line-height
        ) !important;

    white-space:
        normal !important;
}


/* =========================================================
   CHILD CATEGORY ROWS
   ========================================================= */

.jnn-business-overlay-item > a {
    min-height:
        var(
            --jnn-biz-dd-row-min-height
        ) !important;

    padding:
        var(
            --jnn-biz-dd-pad-y
        )
        var(
            --jnn-biz-dd-pad-x
        ) !important;

    color:
        var(
            --jnn-biz-dd-text-color
        ) !important;

    font-size:
        var(
            --jnn-biz-dd-font-size
        ) !important;

    font-weight:
        var(
            --jnn-biz-dd-font-weight
        ) !important;

    line-height:
        var(
            --jnn-biz-dd-line-height
        ) !important;

    white-space:
        normal !important;
}

/* =========================================================
   STEP-18 — BORDER, BACKGROUND AND SHADOW
   ========================================================= */

.jnn-business-overlay-parent {
    background:
        var(--jnn-biz-dd-parent-bg) !important;

    border-bottom:
        var(--jnn-biz-dd-divider-width)
        solid
        var(--jnn-biz-dd-divider-color) !important;
}

.jnn-business-overlay-list,
.jnn-business-overlay-item > a {
    background:
        var(--jnn-biz-dd-bg) !important;
}

.jnn-business-overlay-item {
    border-bottom:
        var(--jnn-biz-dd-divider-width)
        solid
        var(--jnn-biz-dd-divider-color) !important;
}

.jnn-business-overlay-item:last-child {
    border-bottom: 0 !important;
}

/* =========================================================
   STEP-19 — HOVER, FOCUS AND TAP FEEDBACK
   ========================================================= */

.jnn-business-overlay-parent,
.jnn-business-overlay-item > a {
    transition:
        background-color
            var(--jnn-biz-dd-transition-duration)
            ease,
        color
            var(--jnn-biz-dd-transition-duration)
            ease !important;

    -webkit-tap-highlight-color:
        transparent !important;
}

/* केवल mouse वाले devices पर hover */
@media (hover: hover) and (pointer: fine) {
    .jnn-business-overlay-parent:hover,
    .jnn-business-overlay-item > a:hover {
        background:
            var(--jnn-biz-dd-hover-bg) !important;

        color:
            var(--jnn-biz-dd-hover-color) !important;
    }
}

/* Keyboard focus */
.jnn-business-overlay-parent:focus-visible,
.jnn-business-overlay-item > a:focus-visible {
    color:
        var(--jnn-biz-dd-focus-color) !important;

    outline:
        var(--jnn-biz-dd-focus-width)
        solid
        var(--jnn-biz-dd-focus-color) !important;

    outline-offset:
        var(--jnn-biz-dd-focus-offset) !important;
}

/* Mobile tap feedback */
.jnn-business-overlay-parent:active,
.jnn-business-overlay-item > a:active {
    background:
        var(--jnn-biz-dd-tap-bg) !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .jnn-business-overlay-parent,
    .jnn-business-overlay-item > a {
        transition: none !important;
    }
}

/* =========================================================
   STEP-20 — MOBILE RESPONSIVE FINE-TUNING
   FINAL PRODUCTION LOCK
   ========================================================= */

/* सामान्य mobile screens */
@media (max-width: 767px) {
    .jnn-business-overlay {
        width:
            min(
                var(--jnn-biz-dd-mobile-width),
                calc(
                    100vw -
                    (
                        var(--jnn-biz-dd-mobile-edge-gap) * 2
                    )
                )
            ) !important;

        max-width:
            calc(
                100vw -
                (
                    var(--jnn-biz-dd-mobile-edge-gap) * 2
                )
            ) !important;
    }
}

/* बहुत छोटे mobile screens */
@media (max-width: 359px) {
    .jnn-business-overlay {
        width:
            min(
                var(--jnn-biz-dd-small-width),
                calc(
                    100vw -
                    (
                        var(--jnn-biz-dd-mobile-edge-gap) * 2
                    )
                )
            ) !important;
    }

    .jnn-business-overlay-parent {
        min-height:
            var(--jnn-biz-dd-small-parent-min-height) !important;

        font-size:
            var(--jnn-biz-dd-small-parent-font-size) !important;
    }

    .jnn-business-overlay-item > a {
        min-height:
            var(--jnn-biz-dd-small-row-min-height) !important;

        font-size:
            var(--jnn-biz-dd-small-font-size) !important;
    }
}

/* Landscape mobile */
@media (max-height: 420px) and (orientation: landscape) {
    .jnn-business-overlay-parent,
    .jnn-business-overlay-item > a {
        min-height: 32px !important;
    }
}

/* =========================================================
   STEP-20A — DROPDOWN LAYER PROTECTION
   ========================================================= */

#jnn-business-dropdown.jnn-business-overlay {
    position: fixed !important;
    z-index: 2147483000 !important;

    isolation: isolate !important;
}