/* Navbar mega menu for free tools + premium OCR (see templates/includes/_mega_menu.html).
   Desktop = .menu-horizontal (multi-column panels). Mobile = .menu-vertical (theme accordions). */
.ot-mm-badge{display:inline-block;margin-inline-start:.4rem;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.12rem .4rem;border-radius:1rem;line-height:1.2}
.ot-mm-premium{background:#FFF4E0;color:#9A5B00;border:1px solid #F5D9A8}
.ot-mm-free{background:#E1F5EE;color:#0F6E56;border:1px solid #BFE8D8}
.ot-mm-lock{margin-inline-start:auto;font-size:.85rem;width:.85rem;height:.85rem;opacity:.55}
.ot-mega-foot{display:none}

/* ---------- Desktop ---------- */
.menu-horizontal>.container-xxl{position:relative}
.menu-horizontal .menu-inner>.menu-item.ot-mega{position:static}
.menu-horizontal .menu-inner>.ot-mega>.ot-mega-panel{
  inline-size:max-content;max-inline-size:min(100%,calc(100vw - 2rem));
  inset-inline-start:.75rem;inset-block-start:100%;
  padding:1rem 1.25rem .75rem;border-radius:.75rem;z-index:1090;
  grid-template-columns:repeat(var(--ot-cols,3),minmax(12.5rem,15rem));column-gap:1.25rem;row-gap:.25rem;
  max-block-size:calc(100vh - 9rem);overflow-y:auto}
.menu-horizontal .menu-inner>.ot-mega.open>.ot-mega-panel{display:grid!important}
.menu-horizontal .ot-mega-panel>.ot-mega-col{position:static!important;margin:0!important}
.menu-horizontal .ot-mega-panel>.ot-mega-col>.ot-mega-head{
  padding:.35rem .5rem!important;margin:0 0 .25rem!important;font-size:.72rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--bs-primary)!important;background:transparent!important;border-bottom:1px solid var(--bs-border-color);border-radius:0!important}
.menu-horizontal .ot-mega-panel>.ot-mega-col>.ot-mega-head::after,
.menu-horizontal .ot-mega-panel>.ot-mega-col>.ot-mega-head>div::after{display:none!important}
.menu-horizontal .ot-mega-panel>.ot-mega-col>.ot-mega-head .menu-icon{font-size:1rem;width:1rem;height:1rem}
.menu-horizontal .ot-mega-panel .ot-mega-list{
  display:flex!important;flex-direction:column;position:static!important;inline-size:auto!important;
  box-shadow:none!important;margin:0!important;padding:0!important;animation:none!important;background:transparent!important}
.menu-horizontal .ot-mega-panel .ot-mega-list>.menu-item>.menu-link{padding:.38rem .5rem!important;margin:0!important;font-size:.86rem;border-radius:.375rem}
.menu-horizontal .ot-mega-panel .ot-mega-list>.menu-item>.menu-link::before{display:none!important}
.menu-horizontal .ot-mega-panel .ot-mega-list .menu-icon{font-size:1.05rem;width:1.05rem;height:1.05rem;margin-inline-end:.5rem;color:var(--bs-primary)}
.menu-horizontal .ot-mega-premium .ot-mega-list .menu-icon{color:#B7791F}
.menu-horizontal .ot-mega-panel .ot-mega-list>.menu-item>.menu-link:hover{background:rgba(var(--bs-primary-rgb),.08)}
.menu-horizontal .ot-mega-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.6rem;padding-top:.7rem;border-top:1px solid var(--bs-border-color);font-size:.8rem;color:var(--bs-secondary-color)}
.menu-horizontal .ot-mega-foot .ti{font-size:1rem;width:1rem;height:1rem;vertical-align:-2px}
/* Free-menu panels right-aligned when they are far right, so they never overflow */
.menu-horizontal .menu-inner>.ot-mega.ot-mega-end>.ot-mega-panel{inset-inline-start:auto;inset-inline-end:.75rem}

/* ---------- Mobile (vertical / hamburger) ---------- */
.menu-vertical .ot-mega-head{font-weight:600}
.menu-vertical .ot-mega-list .menu-link{font-size:.9rem}

/* ---------- Small-phone navbar: keep everything inside the screen ---------- */
@media (max-width:575.98px){
  #layout-navbar .dropdown-shortcuts,
  #layout-navbar .dropdown-language,
  #layout-navbar .navbar-nav-right .nav-item.mx-1{display:none!important}
  #layout-navbar .navbar-nav-right .nav-link{padding-left:.3rem!important;padding-right:.3rem!important}
  #layout-navbar .navbar-nav-right{min-width:0}
}
/* pages that nest a second .layout-page (home, /tools/): the horizontal menu is hidden below xl, so drop its spacer */
@media (max-width:1199.98px){.layout-page .layout-page{padding-top:0!important}}