/**
 * QSuli Drill-Down Menu
 * Style dla off-canvas menu w trybie drill-down
 */

/* Wrapper – tylko w off-canvas */
.kb-off-canvas-inner .qsuli-drilldown-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Track – poziomy pasek paneli */
.kb-off-canvas-inner .qsuli-drilldown-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Panel – każdy poziom menu (wszystkie w tracku, widoczny przez translateX) */
.kb-off-canvas-inner .qsuli-drilldown-panel {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* Przycisk wstecz */
.kb-off-canvas-inner .qsuli-drilldown-back {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75em 0;
  margin-bottom: 0.5em;
  border: none;
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  gap: 0.5em;
  transition: opacity 0.2s;
}

.kb-off-canvas-inner .qsuli-drilldown-back:hover,
.kb-off-canvas-inner .qsuli-drilldown-back:focus-visible {
  opacity: 0.8;
}

.kb-off-canvas-inner .qsuli-drilldown-back span {
  font-weight: 600;
}

/* Lista menu */
.kb-off-canvas-inner .qsuli-drilldown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Element listy */
.kb-off-canvas-inner .qsuli-drilldown-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.kb-off-canvas-inner .qsuli-drilldown-item:last-child {
  border-bottom: none;
}

/* Link / span */
.kb-off-canvas-inner .qsuli-drilldown-item a,
.kb-off-canvas-inner .qsuli-drilldown-item .qsuli-drilldown-link {
  display: block;
  padding: 0.75em 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

.kb-off-canvas-inner .qsuli-drilldown-item a:hover,
.kb-off-canvas-inner .qsuli-drilldown-item .qsuli-drilldown-link:hover {
  opacity: 0.8;
}

/* Element z podmenu – link + strzałka */
.kb-off-canvas-inner .qsuli-drilldown-has-children {
  position: relative;
}

.kb-off-canvas-inner .qsuli-drilldown-has-children > a,
.kb-off-canvas-inner .qsuli-drilldown-has-children > .qsuli-drilldown-link {
  padding-right: 2.5em;
  cursor: pointer;
}

/* Przycisk strzałki › */
.kb-off-canvas-inner .qsuli-drilldown-next {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 2em;
  height: 100%;
  min-height: 2.5em;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1.25em;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.kb-off-canvas-inner .qsuli-drilldown-next:hover,
.kb-off-canvas-inner .qsuli-drilldown-next:focus-visible {
  opacity: 1;
}
