/* Zakelijk submenu with Betaalterminal Oplossingen. The rest of the live menu is unchanged. */
@media (min-width: 992px) {
  /* The panel keeps the live 300px look; clicking Betaalterminal Oplossingen widens it with a column of six pages. */
  #desktop-menu#desktop-menu .item-id-bedrijven .submenu__inner { width: 370px !important; background: #fff; transition: width .25s cubic-bezier(.22, 1, .36, 1), left .25s cubic-bezier(.22, 1, .36, 1); }
  #desktop-menu#desktop-menu .item-id-bedrijven .submenu__inner.is-expanded { width: 710px !important; left: -260px !important; }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-2 { position: static; width: 370px !important; }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-2::after { content: none; }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-2 .menu-item__text { white-space: nowrap; font-size: calc(var(--menu-font-size) * .9); }

  #desktop-menu#desktop-menu .item-id-bedrijven .submenu__inner .menu__level-2 .menu-item--has-3rd-level { position: static; }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu-item--has-3rd-level > .menu-item__inner { position: relative; cursor: pointer; }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu-item--has-3rd-level > .menu-item__inner::after {
    content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: var(--ys-blue);
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%); transition: transform .25s ease;
  }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu-item--has-3rd-level[aria-expanded=true] > .menu-item__inner { background: rgba(205, 236, 249, .7); }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu-item--has-3rd-level[aria-expanded=true] > .menu-item__inner .menu-item__text { font-weight: 700; color: var(--ys-dark-blue); }

  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-2 .menu-item--has-3rd-level .menu__level-3 {
    display: none; position: absolute; top: 0; bottom: 0; left: 370px; right: 0; width: auto; min-width: 0; min-height: 0;
    margin: 0; padding: 28px 22px; list-style: none; background: #F2F9FD; border-left: 1px solid #E3E7F0;
  }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-2 .menu-item--has-3rd-level[aria-expanded=true] .menu__level-3 { display: block; }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-3::before {
    content: "Betaalterminal Oplossingen"; display: block; margin: 0 0 12px 12px; white-space: nowrap; line-height: 16px;
    font-family: "Courier Prime", monospace; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ys-blue);
  }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-2 .menu-item--has-3rd-level .menu__level-3 li { width: 100%; margin: 0 0 2px; padding: 0; line-height: 1; }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-2 .menu-item--has-3rd-level .menu__level-3 li:hover { background: none; }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-2 .menu-item--has-3rd-level .menu__level-3 li .menu-item__text {
    display: block; width: 100%; margin: 0; left: 0; padding: 9px 12px; border-radius: 12px; line-height: 24px; white-space: nowrap;
    font-size: calc(var(--menu-font-size) * .9); color: var(--ys-blue); text-decoration: none;
  }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-2 .menu-item--has-3rd-level .menu__level-3 li a.menu-item__text:hover { background: #fff; color: var(--ys-dark-blue); }
  #desktop-menu#desktop-menu .item-id-bedrijven .menu__level-2 .menu-item--has-3rd-level .menu__level-3 li.menu-item--current .menu-item__text { background: #fff; font-weight: 700; color: var(--ys-dark-blue); }
}

/* Mobile: Betaalterminal Oplossingen slides to its own level with the six pages, which fit above the Inloggen bar. */
.mobile-menu .mobile-menu-item--has-3rd-level > .menu-item__text { cursor: pointer; }
.mobile-menu .mobile-menu-item--has-3rd-level .mobile-menu__level-3 .mobile-menu-item { height: 6vmax; margin-bottom: 3vh; font-size: 2.6vmax; }

/* Preview only: an item without a page yet is muted and carries a small "nog geen pagina" tag. */
.menu-item--todo { opacity: .55; cursor: not-allowed; }
.menu-item--todo::after {
  content: "nog geen pagina"; display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 50px;
  background: #FEF0C7; color: #93370D; font-size: 11px; line-height: 16px; font-weight: 600; vertical-align: middle; white-space: nowrap;
}

/* Hub page button "Accepteer pinbetalingen" opens the Zakelijk menu at Betaalterminal Oplossingen. */
@media (min-width: 992px) {
  #desktop-menu .item-id-bedrijven.is-forced-open > .submenu__container { opacity: 1; pointer-events: auto; }
}