/* ============================================================
   JB CATBAR v1.0 — Category Bar Styles
   Extracted from jb-catbar-preview v4.2

   Breakpoints:
     Desktop single-row: > 1499px
     Desktop double-row: 981px – 1499px
     Mobile accordion:   <= 980px
   ============================================================ */

/* ── CATBAR AREA (wrapper for dropdown positioning) ── */
.jb-catbar-area-inner{
  position:relative;
  z-index:99999;
}

/* ── CATBAR BAR ── */
.jb-catbar-bg{
  background:rgba(255,255,255,.33);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-radius:10px;
  height:50px;
  display:flex;align-items:center;
  padding:5px;
  box-shadow:0px 12px 18px -6px rgba(76,29,161,.2);
  position:relative;
}
.jb-catbar-wrapper{
  position:relative;font-family:'Bayon',sans-serif;width:100%;
  opacity:0;animation:jbCatbarFadeIn .4s ease .15s forwards;
}
@keyframes jbCatbarFadeIn{to{opacity:1}}

/* ── HORIZONTAL BAR — single row ── */
.jb-catbar-root{
  list-style:none !important;padding:0 !important;margin:0 !important;
  display:flex;align-items:center;justify-content:center;gap:4px;position:relative;
}
.jb-catbar-root > li{list-style:none !important;position:relative;flex:1 1 auto;text-align:center}
.jb-catbar-root > li > a{
  display:flex;align-items:center;justify-content:center;
  padding:10px 8px;font-size:18px;font-family:'Bayon',sans-serif;
  line-height:1.2;color:#4c1da1 !important;text-decoration:none !important;
  white-space:nowrap;border-radius:6px;
  transition:background .18s ease, color .18s ease;cursor:pointer;position:relative;
}
.jb-catbar-root > li > a:hover,
.jb-catbar-root > li.is-active > a{background:#4c1da1;color:#fff !important}

/* Chevron — inline, points right → rotates down on hover/active */
.jb-catbar-root > li.has-children > a::after{
  content:'';display:inline-block;flex-shrink:0;
  width:5px;height:5px;margin-left:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg) translateY(-3px);opacity:.3;
  transition:opacity .25s ease, transform .3s ease;
}
.jb-catbar-root > li.has-children:hover > a::after{opacity:1;transform:rotate(45deg) translateY(-3px)}
.jb-catbar-root > li.has-children.is-active > a::after{opacity:1;transform:rotate(45deg) translateY(-3px)}
.jb-catbar-root .sub-menu{display:none}

/* ── DOUBLE ROW — separate element ── */
.jb-catbar-root-dbl{
  list-style:none !important;padding:0 !important;margin:0 !important;
  display:none;flex-wrap:wrap;align-items:center;gap:4px;position:relative;
}
.jb-catbar-root-dbl.is-active{display:flex}
.jb-catbar-root-dbl > li{list-style:none !important;position:relative;flex:0 0 calc((100% - 5*4px)/6);max-width:calc((100% - 5*4px)/6)}
.jb-catbar-root-dbl > li > a{
  display:flex;align-items:center;justify-content:flex-start;min-width:0;
  padding:10px 8px;font-size:18px;font-family:'Bayon',sans-serif;
  line-height:1.2;color:#4c1da1 !important;text-decoration:none !important;
  white-space:nowrap;border-radius:6px;
  transition:background .18s ease, color .18s ease;cursor:pointer;
}
.jb-catbar-root-dbl > li > a:hover,
.jb-catbar-root-dbl > li.is-active > a{background:#4c1da1;color:#fff !important}
/* Chevron — inline, points right → rotates down on hover/active */
.jb-catbar-root-dbl > li.has-children > a::after{
  content:'';display:inline-block;flex-shrink:0;
  width:5px;height:5px;margin-left:6px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg) translateY(-3px);opacity:.3;
  transition:opacity .25s ease, transform .3s ease;
}
.jb-catbar-root-dbl > li.has-children:hover > a::after{opacity:1;transform:rotate(45deg) translateY(-3px)}
.jb-catbar-root-dbl > li.has-children.is-active > a::after{opacity:1;transform:rotate(45deg) translateY(-3px)}
/* Text truncation — flex:0 1 auto so span shrinks but chevron sticks to text */
.jb-catbar-root-dbl > li > a > .jb-catbar-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jb-catbar-root-dbl .sub-menu{display:none}
.jb-catbar-bg.is-double{height:auto;min-height:50px}

/* ── DROPDOWN PORTAL (lives in document.body, outside DIVI) ── */
.jb-catbar-dropdown{
  position:absolute;z-index:99999;
  pointer-events:none;
  overflow:hidden;
}
.jb-catbar-dropdown.has-visible-panel{
  overflow:visible;
}
/* Bridge — real painted element that blocks clicks through the gap */
.jb-catbar-bridge{
  position:absolute;top:0;left:0;right:0;height:12px;
  pointer-events:none;background:rgba(255,255,255,.01);
}
.jb-catbar-dropdown.has-visible-panel .jb-catbar-bridge{
  pointer-events:auto;
}
.jb-catbar-panel{
  list-style:none;position:absolute;padding:10px;margin:0;
  min-width:260px;max-width:400px;width:max-content;
  top:12px;
  border-radius:10px;font-family:'Bayon',sans-serif;letter-spacing:1px;
  background:rgba(255,255,255,.33) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);
  border-top:4px solid #4c1da1;
  box-shadow:0px 12px 18px -6px rgba(76,29,161,.2);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
.jb-catbar-panel.is-visible{opacity:1;visibility:visible;pointer-events:auto}

/* ── PANEL ITEM ROW ── */
.jb-catbar-panel .jb-item-row{display:flex;align-items:center;min-height:38px;margin-right:0;transition:opacity .25s ease}
.jb-catbar-panel .jb-item-row a{
  flex:1;min-width:0;display:flex;align-items:center;
  padding:7px 4px;font-size:16px;font-family:'Bayon',sans-serif;letter-spacing:1px;
  line-height:1.2;color:#000 !important;text-decoration:none !important;cursor:pointer;
  white-space:normal;border-radius:6px;transition:background .18s ease, text-shadow .18s ease;
}
.jb-catbar-panel .jb-item-row a:hover{background:rgba(76,29,161,.2);text-shadow:0 1px 3px rgba(76,29,161,.25)}

/* Dim */
.jb-catbar-panel .jb-item-row.dim-1{opacity:.75}
.jb-catbar-panel .jb-item-row.dim-2{opacity:.55}
.jb-catbar-panel .jb-item-row.dim-3{opacity:.4}
.jb-catbar-panel .jb-item-row.dim-4{opacity:.3}
/* Top-level panel items separator */
.jb-catbar-panel > li + li{margin-top:2px;padding-top:2px;border-top:1px solid rgba(0,0,0,.06)}
.jb-catbar-panel li{list-style:none}
.jb-catbar-panel li.is-hidden-below{display:none}

/* ── TOGGLE ── */
.jb-catbar-panel .jb-toggle{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:36px;cursor:pointer;border:none;background:transparent;padding:0;flex-shrink:0;
}
.jb-catbar-panel .jb-toggle-icon{
  width:26px;height:26px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(0,0,0,.15);color:#000;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.jb-catbar-panel .jb-toggle-icon::after{
  content:'';display:block;width:6px;height:6px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translate(-1px,-1px);transition:transform .3s ease;
}
.jb-catbar-panel .jb-toggle.is-open .jb-toggle-icon{background:#000;border-color:#000;color:#fff}
.jb-catbar-panel .jb-toggle.is-open .jb-toggle-icon::after{transform:rotate(45deg) translate(-1px,-1px)}

/* ── SUBMENUS in panel — ALL levels ── */
/*
   LAYOUT: Parent has padding:10px which provides the visual gap.
   Card margin-left:0, margin-right:-10px = flush right, 10px from left (via parent padding).
   Card margin-bottom:0 — parent padding provides bottom gap on last item.
   Card padding:10px internally.
   Nested: parent card padding:10px gives offset, child margin:0 -10px 0 0 = same logic.
*/
.jb-catbar-panel .sub-menu{
  display:block !important;position:static !important;
  min-width:0 !important;max-width:none !important;width:auto !important;
  box-shadow:none !important;list-style:none;
  margin:0;padding:0;
  border:none !important;
  border-radius:10px !important;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .3s ease, opacity .25s ease;
  background:rgba(255,255,255,.33) !important;
}
.jb-catbar-panel .sub-menu.is-expanded{
  max-height:5000px;opacity:1;overflow:visible;
  margin:4px -10px 0 0;
  padding:10px;
  border-top:4px solid #4c1da1 !important;
  border-left:1px solid rgba(255,255,255,.5) !important;
  border-right:1px solid rgba(255,255,255,.5) !important;
  border-bottom:1px solid rgba(255,255,255,.5) !important;
  border-radius:10px !important;
}
/* All deeper sub-menus: same — parent card padding:10px gives offset, flush right */
.jb-catbar-panel .sub-menu .sub-menu.is-expanded,
.jb-catbar-panel .sub-menu .sub-menu .sub-menu.is-expanded,
.jb-catbar-panel .sub-menu .sub-menu .sub-menu .sub-menu.is-expanded{
  background:rgba(255,255,255,.33) !important;
  border-top:4px solid #4c1da1 !important;
  border-left:1px solid rgba(255,255,255,.5) !important;
  border-right:1px solid rgba(255,255,255,.5) !important;
  border-bottom:1px solid rgba(255,255,255,.5) !important;
  margin:4px -10px 0 0;
  padding:10px;
  border-radius:10px !important;
}

.jb-catbar-panel .sub-menu a{color:#000 !important;text-decoration:none !important}
/* Separator lines inside submenu cards */
.jb-catbar-panel .sub-menu > li + li{margin-top:1px;padding-top:1px;border-top:1px solid rgba(0,0,0,.05)}


/* ============================================================
   MOBILE (<=980px)
   ============================================================ */
@media(max-width:980px){
  .jb-catbar-dropdown{display:none !important}
  .jb-catbar-root > li.has-children > a::after{display:none !important}
  .jb-catbar-root > li.has-children > a{padding-right:6px !important}
  .jb-catbar-bg{height:auto;min-height:44px;padding:10px 0 10px 10px}

  /* ── HAMBURGER ── */
  .jb-catbar-hamburger{
    display:flex !important;align-items:center;gap:10px;
    padding:4px 0 !important;cursor:pointer;border:none;background:none;
    font-family:'Bayon',sans-serif;font-size:18px;letter-spacing:1px;
    width:100%;text-align:left;color:#4c1da1;transition:opacity .25s ease;
  }
  .jb-catbar-hamburger.is-dimmed{opacity:.33}
  .jb-catbar-hamburger-label{flex:1;text-align:left}
  .jb-catbar-hamburger-icon{
    width:24px;height:18px;position:relative;margin-left:10px !important;
    display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;
  }
  .jb-catbar-hamburger-icon span{
    display:block;width:100%;height:2.5px;background:#4c1da1;
    border-radius:2px;transition:transform .3s ease, opacity .3s ease;
  }
  .jb-catbar-hamburger.is-active .jb-catbar-hamburger-icon span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .jb-catbar-hamburger.is-active .jb-catbar-hamburger-icon span:nth-child(2){opacity:0}
  .jb-catbar-hamburger.is-active .jb-catbar-hamburger-icon span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  /* ── MENU ROOT — mobile accordion ── */
  .jb-catbar-root{display:block;max-height:0;overflow:hidden;transition:max-height .4s ease}
  .jb-catbar-root.is-expanded{max-height:8000px}

  /* ── ITEM ROWS ── */
  .jb-catbar-root .jb-item-row{display:flex;align-items:center;min-height:38px;margin-right:0;transition:opacity .25s ease}
  .jb-catbar-root > li{text-align:left}
  .jb-catbar-root > li > a,
  .jb-catbar-root > li > .jb-item-row > a{
    flex:1;min-width:0;padding:8px 0 8px 20px !important;font-size:18px !important;
    border-radius:0 !important;white-space:normal !important;justify-content:flex-start;color:#4c1da1 !important;
    text-decoration:none !important;
  }
  .jb-catbar-root .sub-menu .jb-item-row > a{
    flex:1;min-width:0;padding:6px 0 !important;font-size:16px !important;
    border-radius:0 !important;white-space:normal !important;justify-content:flex-start;
    text-decoration:none !important;
  }

  /* Separator between top-level items */
  .jb-catbar-root > li + li{position:relative}
  .jb-catbar-root > li + li::before{
    content:'';position:absolute;top:0;left:10px;right:10px;height:1px;
    background:rgba(76,29,161,.1);
  }

  /* Dim levels */
  .jb-catbar-root .jb-item-row.dim-1{opacity:.75}
  .jb-catbar-root .jb-item-row.dim-2{opacity:.55}
  .jb-catbar-root .jb-item-row.dim-3{opacity:.4}
  .jb-catbar-root .jb-item-row.dim-4{opacity:.3}
  .jb-catbar-root li.is-hidden-below{display:none}

  /* ── TOGGLE ── */
  .jb-catbar-root .jb-toggle{
    display:flex;align-items:center;justify-content:center;
    width:48px;height:38px;cursor:pointer;border:none;background:transparent;padding:0;flex-shrink:0;
    margin-right:5px;
  }
  .jb-catbar-root .jb-toggle-icon{
    width:32px;height:32px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    border:1.5px solid rgba(76,29,161,.2);color:#4c1da1;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
  }
  .jb-catbar-root .jb-toggle-icon::after{
    content:'';display:block;width:7px;height:7px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(-45deg) translate(-1px,-1px);transition:transform .3s ease;
  }
  .jb-catbar-root .jb-toggle.is-open .jb-toggle-icon{background:#4c1da1;border-color:#4c1da1;color:#fff}
  .jb-catbar-root .jb-toggle.is-open .jb-toggle-icon::after{transform:rotate(45deg) translate(-1px,-1px)}
  .jb-catbar-root .sub-menu .sub-menu .jb-toggle-icon{border-color:rgba(0,0,0,.15);color:#000}
  .jb-catbar-root .sub-menu .sub-menu .jb-toggle.is-open .jb-toggle-icon{background:#000;border-color:#000;color:#fff}

  /* ── SUBMENUS — mobile accordion ── */
  .jb-catbar-root .sub-menu{
    display:none !important;position:static !important;
    min-width:0 !important;max-width:none !important;width:auto !important;
    box-shadow:none !important;border:none !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    list-style:none;margin:0 !important;padding:0 !important;
    border-radius:0 !important;
    background:transparent !important;
  }
  /* Animating: visible but collapsed (for open/close animation) */
  .jb-catbar-root .sub-menu.is-animating,
  .jb-catbar-root .sub-menu.is-collapsing{
    display:block !important;
    overflow:hidden;
    margin:4px 0 0 0 !important;
    padding:10px 0 10px 10px !important;
    border-left:10px solid transparent !important;
    border-radius:10px !important;
    box-shadow:0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03) !important;
  }
  /* Stage 2: fully expanded */
  .jb-catbar-root .sub-menu.is-expanded{
    display:block !important;
    max-height:5000px;overflow:visible;opacity:1;
    margin:4px 0 0 0 !important;
    padding:10px 0 10px 10px !important;
    border-left:10px solid transparent !important;
    border-radius:10px !important;
    box-shadow:0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.03) !important;
    transition:max-height .3s ease, opacity .25s ease;
  }
  .jb-catbar-root .sub-menu a{font-size:16px !important;padding:6px 0 !important;color:#000 !important;text-decoration:none !important}

  /* Separator lines inside mobile cards */
  .jb-catbar-root .sub-menu > li + li{margin-top:2px;padding-top:2px;position:relative}
  .jb-catbar-root .sub-menu > li + li::before{
    content:'';position:absolute;top:0;left:0;right:10px;height:1px;
    background:rgba(0,0,0,.06);
  }

  /* Tiered submenu backgrounds & border colors */
  .jb-catbar-root > li > .sub-menu.is-expanded,
  .jb-catbar-root > li > .sub-menu.is-collapsing{border-left-color:#4c1da1 !important;background:rgba(76,29,161,.3) !important}
  .jb-catbar-root > li > .sub-menu > li > .jb-item-row > a{color:#4c1da1 !important}
  .jb-catbar-root > li > .sub-menu > li > .sub-menu.is-expanded,
  .jb-catbar-root > li > .sub-menu > li > .sub-menu.is-collapsing{border-left-color:#000 !important;background:rgba(255,255,255,.45) !important}
  .jb-catbar-root .sub-menu .sub-menu .sub-menu.is-expanded,
  .jb-catbar-root .sub-menu .sub-menu .sub-menu.is-collapsing{border-left-color:#000 !important;background:rgba(255,255,255,.65) !important}
  .jb-catbar-root .sub-menu .sub-menu .sub-menu .sub-menu.is-expanded,
  .jb-catbar-root .sub-menu .sub-menu .sub-menu .sub-menu.is-collapsing{border-left-color:#000 !important;background:#fff !important}

  /* Dim border-left on sibling submenu — Sub1 */
  .jb-catbar-root > li > .jb-item-row.dim-1 ~ ul.is-expanded{border-left-color:rgba(76,29,161,.75) !important}
  .jb-catbar-root > li > .jb-item-row.dim-2 ~ ul.is-expanded{border-left-color:rgba(76,29,161,.55) !important}
  .jb-catbar-root > li > .jb-item-row.dim-3 ~ ul.is-expanded{border-left-color:rgba(76,29,161,.4) !important}
  .jb-catbar-root > li > .jb-item-row.dim-4 ~ ul.is-expanded{border-left-color:rgba(76,29,161,.3) !important}
  /* Dim border-left — Sub2+ */
  .jb-catbar-root .sub-menu .jb-item-row.dim-1 ~ ul.is-expanded{border-left-color:rgba(0,0,0,.75) !important}
  .jb-catbar-root .sub-menu .jb-item-row.dim-2 ~ ul.is-expanded{border-left-color:rgba(0,0,0,.55) !important}
  .jb-catbar-root .sub-menu .jb-item-row.dim-3 ~ ul.is-expanded{border-left-color:rgba(0,0,0,.4) !important}
  .jb-catbar-root .sub-menu .jb-item-row.dim-4 ~ ul.is-expanded{border-left-color:rgba(0,0,0,.3) !important}
}

/* Hamburger hidden on desktop */
.jb-catbar-hamburger{display:none}