/* =======================================================================
   Ticket 4913 - "Shop By Model" mega-menu (New nav item)
   ======================================================================= */

/* The nav row that holds the menu must be position:relative so the full-width
   panel aligns under the bar. These are the storefront nav containers:
     .navMain     -> Default / Default_Preview (home theme)
     .header-main -> SRP_New / VDP_New / Blog_CMS_New (modern theme)
     .main-menu   -> Site / SRP / Blog_CMS (older theme - fallback)
   position:relative with no offsets does not move anything; a closer positioned
   ancestor (e.g. an existing li.has-children) still wins, so existing dropdowns
   are unaffected. */
.navMain,
.header-main,
.main-menu { position: relative; }

/* parent <li>: it must NOT be the panel's positioning context, otherwise the
   full-width panel gets trapped at the narrow menu-item width (the thin vertical
   strip bug). Some dealer themes set the dropdown <li> to position:relative or give
   it a transform (both create a containing block) via inline custom CSS, so override
   with !important. The panel then anchors to the nearest positioned nav row
   (.navMain / .header-main / .main-menu, set position:relative above). */
.jgf-has-mega { position: static !important; transform: none !important; }

.jgf-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    /* Ticket 4913 - inherit the site/header font so menu typography matches each theme */
    font-family: inherit;
    border-top: 4px solid var(--secondarycolor, #1666f0);
    box-shadow: 0 22px 55px rgba(0,9,91,.20);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* open on hover OR when jQuery adds .jgf-open */
.jgf-has-mega:hover > .jgf-mega,
.jgf-has-mega.jgf-open > .jgf-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}
.jgf-mega::-webkit-scrollbar { width: 8px; }
.jgf-mega::-webkit-scrollbar-thumb { background: #c7d0e0; border-radius: 8px; }

/* invisible hover-bridge so the panel doesn't close in the gap under "New" */
@media (min-width:992px) {
    .jgf-has-mega > .jgf-mega::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -16px;
        height: 16px;
    }
}

.jgf-mega-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 22px 24px 26px;
    display: grid;
    grid-template-columns: 260px 1fr;
}

/* LEFT links */
.jgf-left { padding-right: 26px; border-right: 1px solid #e3e7ee; }
.jgf-left h3,
.jgf-right h3 {
    margin: 0 0 14px;
    font-size: 15px;
    color: #00095b;
    font-family: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.jgf-left ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.jgf-left li { margin: 0; }
.jgf-left li a {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 600;
    color: #11161f;
}
.jgf-left li a:hover { color: var(--secondarycolor, #1666f0); }
.jgf-arr { color: var(--secondarycolor, #1666f0); font-size: 11px; font-style: normal; }

/* --- Theme-conflict overrides --------------------------------------------------
   Dealer nav themes style ALL .nav-menu links (white text for the dark nav bar,
   a hover background, and padding). Inside the white mega panel that makes the
   left-column links invisible (white-on-white) and adds a stray hover bar. These
   rules re-assert the panel's own link styling with !important + extra specificity
   so they win over the theme on any dealer site. Scoped to .jgf-mega only. */
.jgf-mega .jgf-left li a,
.jgf-mega .jgf-left li a:link,
.jgf-mega .jgf-left li a:visited {
    color: #11161f !important;
    background: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    text-decoration: none !important;
    text-indent: 0 !important;
}
.jgf-mega .jgf-left li a:hover,
.jgf-mega .jgf-left li a:focus {
    color: var(--secondarycolor, #1666f0) !important;
    background: none !important;
}
.jgf-mega .jgf-left li a .jgf-arr { color: var(--secondarycolor, #1666f0) !important; flex: 0 0 auto; }
/* the New trigger itself shouldn't get the theme's solid hover bar while the panel is open */
.jgf-has-mega:hover > .menuHeader,
.jgf-has-mega.jgf-open > .menuHeader { background: none !important; }

/* RIGHT card grid */
.jgf-right { padding-left: 28px; }
.jgf-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }

.jgf-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 9px;
    overflow: hidden;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.jgf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,9,91,.14);
    border-color: #d4dbe8;
}

/* --- Theme-conflict overrides for the RIGHT-side cards --------------------------- */
.jgf-mega .jgf-grid .jgf-card,
.jgf-mega .jgf-grid .jgf-card:link,
.jgf-mega .jgf-grid .jgf-card:visited,
.jgf-mega .jgf-grid .jgf-card:hover,
.jgf-mega .jgf-grid .jgf-card:focus,
.jgf-mega .jgf-grid .jgf-card:active {
    background: #fff !important;
    background-image: none !important;
    padding: 0 !important;
    text-indent: 0 !important;
    min-height: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
}
.jgf-mega .jgf-grid .jgf-card .jgf-media { background: #f4f7fc !important; background-image: none !important; }
.jgf-mega .jgf-grid .jgf-card .jgf-info { background: #fff !important; }

.jgf-media { position: relative; background: #f4f7fc; padding: 8px 10px 4px; }
.jgf-media img { width: 100%; height: 78px; object-fit: contain; display: block; }

.jgf-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--secondarycolor, #00095b);
    color: #fff;
    border-radius: 7px;
    padding: 5px 10px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 4px 9px rgba(0,9,91,.28);
}
.jgf-badge b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
}
.jgf-badge i {
    display: block;
    font-style: normal;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 3px;
    opacity: .95;
}

.jgf-seller {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #d51f30;
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(213,31,48,.3);
}

.jgf-info { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; }
.jgf-name { font-size: 14px; font-weight: 500; color: #5b6573; line-height: 1.2; }
.jgf-name strong { color: #11161f; font-weight: 800; }
.jgf-price { font-size: 12px; color: #5b6573; }
.jgf-price strong { color: #11161f; font-weight: 800; font-size: 12.5px; }

/* responsive - small-desktop / tablet-landscape (still hover/desktop): stack the columns */
@media (min-width:992px) and (max-width:1199px) {
    .jgf-mega-inner { grid-template-columns: 1fr; }
    .jgf-left {
        border-right: 0;
        border-bottom: 1px solid #e3e7ee;
        padding-right: 0;
        padding-bottom: 18px;
        margin-bottom: 8px;
    }
    .jgf-right { padding-left: 0; }
}

/* MOBILE / hamburger zone (<=991px, matches the theme's Bootstrap nav collapse):
   tap-to-expand accordion + 2 cards per row */
@media (max-width:991px) {
    .jgf-mega {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border-top: 0;
        max-height: none;
        overflow: visible;
        background: #fff; /* Ticket 4913 - match desktop/web view (was #f4f7fc) */
    }
    /* mobile: New behaves like a normal dropdown <li> (the hover-bridge + its position:relative are
       scoped to >=992px above, so they no longer hijack the theme's chevron). Keep the <li> relative
       so the theme's chevron (a::after, right-aligned) anchors to the full-width row. */
    .jgf-has-mega { position: relative !important; }
    .jgf-has-mega.jgf-open > .jgf-mega { display: block; }

    .jgf-mega-inner { display: block; padding: 6px 4px 16px; }
    .jgf-left { border-right: 0; padding: 0; }
    .jgf-right { padding: 0; }

    /* Ticket 4913 - on mobile, make the New mega's left links match the site's standard dropdown (e.g. Used):
       roomier full-width rows with a bottom divider, bold text, and NO leading arrow (other menus have none).
       Tune padding / font-size here if a site's standard dropdown uses different spacing. */
    .jgf-left ul { gap: 0; }
    .jgf-left li { border-bottom: 1px solid #e3e7ee; }
    .jgf-mega .jgf-left li a,
    .jgf-mega .jgf-left li a:link,
    .jgf-mega .jgf-left li a:visited {
        display: block !important;
        padding: 15px 20px 15px 40px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }
    .jgf-mega .jgf-left .jgf-arr { display: none !important; }

    .jgf-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } /* 2 cards */
    .jgf-media img { height: 70px; }
}
@media (max-width:480px) {
    .jgf-grid { grid-template-columns: 1fr; } /* phones: 1 card per row */
    .jgf-media img { height: 90px; }
}

/* Ticket 4913 - skeleton placeholders shown until the API fills the grid (client-side),
   and left in place as a graceful fallback if the API is unavailable. */
.jgf-card.jgf-skeleton {
    min-height: 150px;
    border-color: #eef1f6;
    background: linear-gradient(100deg, #f4f7fc 30%, #eef1f6 50%, #f4f7fc 70%);
    background-size: 200% 100%;
    animation: jgf-shimmer 1.2s linear infinite;
    pointer-events: none;
    cursor: default;
}
.jgf-card.jgf-skeleton:hover { transform: none; box-shadow: none; }
@keyframes jgf-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}