.tree-3lvl, .tree-3lvl * { box-sizing: border-box; }

.tree-3lvl .lvl1{
  display:flex; gap:28px; flex-wrap:wrap; justify-content:center; margin-bottom:12px;
}
.tree-3lvl .cat-btn{
  padding:10px 20px; border:0; border-radius:999px; cursor:pointer;
  background: var(--drct-accent, #1967d2); color:#fff; font-weight:600;
  box-shadow:0 2px 8px rgba(25,103,210,.18);
}
.tree-3lvl .cat-btn:hover{ filter:brightness(.95); }

/* Centralni panel */
.tree-3lvl .cat-panel{
  display:none; max-width: var(--drct-max, 1200px); margin:0 auto; text-align:center;
  background: var(--drct-bg, #f1f6fe); border: var(--drct-border, 1px solid #d7e6ff);
  border-radius:16px; padding:24px 28px; box-shadow:0 8px 24px rgba(25,103,210,.08);
}
.tree-3lvl .cat-panel.show{ display:block; }

.tree-3lvl .cat-panel .desc{
  margin:0 0 14px 0; color:#2f3a45; font-size:15px; text-align:center;
}

/* Chipi */
.tree-3lvl .cat-panel .lvl2{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:14px;
}
.tree-3lvl .cat-panel .sub-leaf{
  padding:8px 18px; border-radius:12px; border:1px solid #cfe3f7;
  background:#e8f2fb; color: var(--drct-accent, #1967d2); font-weight:600; cursor:pointer;
  transition:background .2s, border-color .2s, transform .12s;
}
.tree-3lvl .cat-panel .subwrap.active .sub-leaf{
  background:#e0eefc; border-color:#a7caf1; transform:translateY(-1px);
}

.tree-3lvl .cat-panel .source-panel{ display:none; }

.tree-3lvl .cat-panel .suboutlet{
  width:100%; max-width:1000px; margin:12px auto 0; padding:16px 20px;
  background:var(--drct-branch-bg, #ffffff);
  border:1px solid #e1ecf7; border-radius:10px;
  text-align:center; box-shadow:0 4px 16px rgba(25,103,210,.06);
}

.tree-3lvl .cat-panel .suboutlet .lvl3{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:10px;
}
.tree-3lvl .cat-panel .suboutlet .leaf{
  padding:8px 16px; border-radius:12px; border:1px solid #cfe3f7;
  background:#e8f2fb; color: var(--drct-accent, #1967d2); font-weight:600; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.tree-3lvl .cat-panel .suboutlet .leaf:hover{
  background:#dcedfb; border-color:#b6d6f5;
}
.tree-3lvl .cat-panel .suboutlet .leaf-desc{
  max-width:1000px; margin:12px auto 0; padding:10px 12px;
  background:#f9fbfe; border:1px solid #e1ecf7; border-radius:10px;
  min-height:34px; color:#2b3a42; text-align:center;
}

@media (max-width:600px){
  .tree-3lvl .cat-panel{ max-width:100%; padding:18px; }
  .tree-3lvl .cat-panel .suboutlet,
  .tree-3lvl .cat-panel .suboutlet .leaf-desc{ max-width:100%; }
}


/* --- Animacije (fade + rahel slide) --- */
.drct-anim-enter {
  opacity: 0;
  transform: translateY(6px);
}
.drct-anim-enter.drct-anim-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .24s ease, transform .24s ease;
}


/* Aktivni korenski gumb (1. nivo) */
.tree-3lvl .cat-btn.is-active{
  filter:brightness(0.95);
  box-shadow:0 3px 10px rgba(25,103,210,.25);
}

/* Aktivni gumb na posameznem nivoju (veja) */
.tree-3lvl .cat-panel .suboutlet .leaf.is-active{
  background:var(--drct-active, var(--drct-accent, #1967d2));
  color:#fff;
  border-color:rgba(0,0,0,.04);
}