.ll-vtabs{
  --ll-vtabs-width: 100%;
  --ll-vtabs-nav-width: 260px;
  --ll-vtabs-gap: 16px;
  --ll-vtabs-radius: 12px;
  --ll-vtabs-container-bg: #fff;
  --ll-vtabs-container-border: 1px solid #e9e9e9;
  --ll-vtabs-nav-bg: #f7f7f7;
  --ll-vtabs-panel-bg: #fff;

  /* Default tab label styles (can be overridden per tab via CSS vars) */
  --ll-tab-font-size: 14px;
  --ll-tab-font-weight: 600;
  --ll-tab-color: #111;
  --ll-tab-bg: #fff;
  --ll-tab-bg-hover: #f3f3f3;
  --ll-tab-color-active: #fff;
  --ll-tab-bg-active: #111;
  --ll-tab-color-hover: var(--ll-tab-color);
  --ll-tab-border-width: 1px;
  --ll-tab-border-color: rgba(0,0,0,0.08);
  --ll-tab-radius: 10px;
  --ll-tab-pad-y: 10px;
  --ll-tab-pad-x: 12px;
  --ll-tab-gap: 8px;
  width: var(--ll-vtabs-width);
  max-width: 100%;
}

.ll-vtabs__inner{
  display:flex;
  gap: var(--ll-vtabs-gap);
  background: var(--ll-vtabs-container-bg);
  border: var(--ll-vtabs-container-border);
  border-radius: var(--ll-vtabs-radius);
  overflow: hidden;
}

.ll-vtabs__nav{
  width: var(--ll-vtabs-nav-width);
  background: var(--ll-vtabs-nav-bg);
  padding: 10px;
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
  gap: var(--ll-tab-gap);
}

.ll-vtabs__tab{
  appearance:none;
  border: var(--ll-tab-border-width) solid var(--ll-tab-border-color);
  background: var(--ll-tab-bg);
  color: var(--ll-tab-color);
  font-size: var(--ll-tab-font-size);
  font-weight: var(--ll-tab-font-weight);
  text-align:left;
  padding: var(--ll-tab-pad-y) var(--ll-tab-pad-x);
  border-radius: var(--ll-tab-radius, 10px);
  cursor:pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.ll-vtabs__tab:hover{
  background: var(--ll-tab-bg-hover);
  color: var(--ll-tab-color-hover);
}

.ll-vtabs__tab.is-active{
  background: var(--ll-tab-bg-active);
  color: var(--ll-tab-color-active);
  border-color: var(--ll-tab-border-color);
}

.ll-vtabs__panels{
  flex:1;
  min-width: 0;
  background: var(--ll-vtabs-panel-bg);
  padding: 16px;
  box-sizing: border-box;
}

.ll-vtabs__panel.is-active{
  display:block;
}

/* Mobile: accordion-like layout (tab label on top, content directly under it) */
@media (max-width: 767px){
  .ll-vtabs.is-mobile .ll-vtabs__inner{
    display:block;
  }
  .ll-vtabs.is-mobile .ll-vtabs__nav{
    width: 100%;
  }
  .ll-vtabs.is-mobile .ll-vtabs__panels{
    display:none;
  }
  .ll-vtabs.is-mobile .ll-vtabs__panel--mobile{
    margin: 8px 0 var(--ll-tab-gap);
    padding: 14px;
    background: var(--ll-vtabs-panel-bg);
    border: var(--ll-vtabs-container-border);
    border-radius: var(--ll-vtabs-radius);
  }
}