<section class="bm-tabs" style="
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  background-color:var(--bm-bg);
  background-image:var(--bm-bg-gradient, none);
  color:var(--bm-text);
  padding-top:var(--bm-padding-top, var(--bm-padding-y, 0px));
  padding-right:var(--bm-padding-right, var(--bm-padding-x, 0px));
  padding-bottom:var(--bm-padding-bottom, var(--bm-padding-y, 0px));
  padding-left:var(--bm-padding-left, var(--bm-padding-x, 0px));
  margin-top:var(--bm-margin-top, var(--bm-margin-y, 0));
  margin-right:var(--bm-margin-right, var(--bm-margin-x, 0));
  margin-bottom:var(--bm-margin-bottom, var(--bm-margin-y, 0));
  margin-left:var(--bm-margin-left, var(--bm-margin-x, 0));
  border-top-left-radius:var(--bm-border-top-left-radius, var(--bm-border-radius, 0px));
  border-top-right-radius:var(--bm-border-top-right-radius, var(--bm-border-radius, 0px));
  border-bottom-right-radius:var(--bm-border-bottom-right-radius, var(--bm-border-radius, 0px));
  border-bottom-left-radius:var(--bm-border-bottom-left-radius, var(--bm-border-radius, 0px));
">
  <div class="bm-tabs__nav" style="
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:0 0.5rem;
    box-sizing:border-box;
    border-style:var(--bm-tab-list-border-style, solid);
    border-color:var(--bm-tab-list-border-color, rgba(0, 0, 0, 0.12));
    border-top-width:var(--bm-tab-list-border-top-width, var(--bm-tab-list-border-width, 0px));
    border-right-width:var(--bm-tab-list-border-right-width, var(--bm-tab-list-border-width, 0px));
    border-bottom-width:var(--bm-tab-list-border-bottom-width, var(--bm-tab-list-border-width, 1px));
    border-left-width:var(--bm-tab-list-border-left-width, var(--bm-tab-list-border-width, 0px));
  ">
    <input class="bm-tabs__menu-check" type="checkbox" id="{{tabsId}}-nav" aria-hidden="true" tabindex="-1" style="
      position:absolute;
      opacity:0;
      pointer-events:none;
      width:1px;
      height:1px;
    " />
    <div class="bm-tabs__nav-bar" style="
      display:none;
      align-items:center;
      justify-content:flex-end;
      width:100%;
      box-sizing:border-box;
      min-height:var(--bm-tab-burger-toggle, 2.5rem);
    ">
      <label class="bm-tabs__menu-toggle" for="{{tabsId}}-nav" aria-label="Open tabs menu" style="
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:var(--bm-tab-burger-toggle, 2.5rem);
        height:var(--bm-tab-burger-toggle, 2.5rem);
        margin:0;
        margin-left:auto;
        padding:0;
        border:0;
        border-radius:8px;
        background:transparent;
        color:var(--bm-tab-burger-color, #4b5563);
        cursor:pointer;
        box-sizing:border-box;
      ">
        <span class="bm-tabs__burger" aria-hidden="true"></span>
      </label>
    </div>
    <div class="bm-tabs__list" style="
      display:flex;
      flex-wrap:wrap;
      align-items:flex-end;
      gap:0 0.5rem;
      box-sizing:border-box;
    ">
    {{#tabs}}
      <input class="bm-tabs__input" type="radio" name="{{tabsId}}" id="{{tabsId}}-{{@index}}"{{radioChecked}} style="
        position:absolute;
        opacity:0;
        pointer-events:none;
        width:1px;
        height:1px;
      " />
      <label class="bm-tabs__label" data-bm-el="tabTitle" data-bm-card-index="{{@index}}" for="{{tabsId}}-{{@index}}" onclick="(function(el){var r=el.closest('.bm-tabs');var c=r&&r.querySelector('.bm-tabs__menu-check');if(c)c.checked=false;})(this)" style="
        display:inline-flex;
        align-items:center;
        gap:0.45em;
        cursor:pointer;
        box-sizing:border-box;
        padding-top:var(--bm-tab-padding-top, var(--bm-tab-padding-y, var(--bm-tab-pad-y, 0.65rem)));
        padding-right:var(--bm-tab-padding-right, var(--bm-tab-padding-x, var(--bm-tab-pad-x, 1rem)));
        padding-bottom:var(--bm-tab-padding-bottom, var(--bm-tab-padding-y, var(--bm-tab-pad-y, 0.65rem)));
        padding-left:var(--bm-tab-padding-left, var(--bm-tab-padding-x, var(--bm-tab-pad-x, 1rem)));
        font-size:var(--bm-tabTitle-font-size, var(--bm-tab-font-size, 1rem));
        font-weight:var(--bm-tabTitle-font-weight, var(--bm-tab-font-weight, 600));
        line-height:var(--bm-tabTitle-line-height, 1.3);
      "><span class="bm-tabs__icon" aria-hidden="true" style="display:{{titleIconDisplay}};flex-shrink:0;line-height:0;align-items:center;justify-content:center;">{{iconHtml}}</span><span class="bm-tabs__label-text bm-edit-text">{{tabTitle}}</span></label>
    {{/tabs}}
    </div>
  </div>
  {{#tabs}}
    <div class="bm-tabs__panel" data-bm-card-index="{{@index}}" data-bm-tab-panel="{{@index}}" style="
      display:none;
      padding-top:var(--bm-tabContent-padding-top, 1.25rem);
      padding-right:var(--bm-tabContent-padding-right, 0);
      padding-bottom:var(--bm-tabContent-padding-bottom, 0);
      padding-left:var(--bm-tabContent-padding-left, 0);
      box-sizing:border-box;
    ">
      <div class="bm-tabs__content" data-bm-el="tabContent" data-bm-card-index="{{@index}}" style="
        font-size:var(--bm-tabContent-font-size, 1rem);
        line-height:var(--bm-tabContent-line-height, 1.6);
        font-weight:var(--bm-tabContent-font-weight, 400);
        color:var(--bm-tabContent-color, var(--bm-text));
        box-sizing:border-box;
      ">{{tabContent}}</div>
      <div class="bm-tabs__buttons" data-bm-el="buttons" data-bm-card-index="{{@index}}" style="
        display:flex;
        flex-wrap:wrap;
        justify-content:var(--bm-justify-content, flex-start);
        align-items:center;
        gap:var(--bm-buttons-gap, 0.75rem);
        width:100%;
        box-sizing:border-box;
        margin:var(--bm-buttons-margin-top, 0.75rem) 0 var(--bm-buttons-margin-bottom, 0);
      ">
        {{#buttons}}
          <a class="bm-tabs__btn" data-bm-btn-index="{{@index}}" href="{{link.url}}"{{link.targetAttr}} style="
            display:inline-flex;
            align-items:center;
            gap:0.45em;
            flex-direction:{{btnIconFlex}};
            text-decoration:none;
            border-style:var(--bm-btn-border-style, none);border-color:var(--bm-btn-border-color, transparent);border-top-width:var(--bm-btn-border-top-width, var(--bm-btn-border-width, 0));border-right-width:var(--bm-btn-border-right-width, var(--bm-btn-border-width, 0));border-bottom-width:var(--bm-btn-border-bottom-width, var(--bm-btn-border-width, 0));border-left-width:var(--bm-btn-border-left-width, var(--bm-btn-border-width, 0));border-top-left-radius:var(--bm-btn-border-top-left-radius, var(--bm-btn-radius, 8px));border-top-right-radius:var(--bm-btn-border-top-right-radius, var(--bm-btn-radius, 8px));border-bottom-right-radius:var(--bm-btn-border-bottom-right-radius, var(--bm-btn-radius, 8px));border-bottom-left-radius:var(--bm-btn-border-bottom-left-radius, var(--bm-btn-radius, 8px));
            padding:var(--bm-btn-pad-y, var(--bm-buttons-pad-y, 0.625rem)) var(--bm-btn-pad-x, var(--bm-buttons-pad-x, 1.25rem));
            box-shadow:var(--bm-btn-shadow, none);
            font-size:var(--bm-btn-font-size, 1rem);
            font-weight:600;
            {{btnStyle}};
          ">{{iconHtml}}{{labelHtml}}</a>
        {{/buttons}}
      </div>
    </div>
  {{/tabs}}
  <style>
    /* Default tab item surface — shared by every label */
    .bm-tabs .bm-tabs__label {
      color: var(--bm-tabTitle-color, var(--bm-tab-color, #64748b));
      background: var(--bm-tab-bg, transparent);
      border-style: var(--bm-tab-border-style, solid);
      border-color: var(--bm-tab-border-color, transparent);
      border-top-width: var(--bm-tab-border-top-width, var(--bm-tab-border-width, 0px));
      border-right-width: var(--bm-tab-border-right-width, var(--bm-tab-border-width, 0px));
      border-bottom-width: var(--bm-tab-border-bottom-width, var(--bm-tab-border-width, 0px));
      border-left-width: var(--bm-tab-border-left-width, var(--bm-tab-border-width, 0px));
      border-top-left-radius: var(--bm-tab-border-top-left-radius, var(--bm-tab-border-radius, 0px));
      border-top-right-radius: var(--bm-tab-border-top-right-radius, var(--bm-tab-border-radius, 0px));
      border-bottom-right-radius: var(--bm-tab-border-bottom-right-radius, var(--bm-tab-border-radius, 0px));
      border-bottom-left-radius: var(--bm-tab-border-bottom-left-radius, var(--bm-tab-border-radius, 0px));
    }
    /* Active: fall back to Default bg when Active bg is unset (not seeded transparent) */
    .bm-tabs .bm-tabs__input:checked + .bm-tabs__label {
      color: var(--bm-tab-active-color, var(--bm-tab-color, var(--bm-tabTitle-color, #3525cd))) !important;
      background: var(--bm-tab-active-bg, var(--bm-tab-bg, transparent));
      border-style: var(--bm-tab-active-border-style, var(--bm-tab-border-style, solid));
      border-color: var(--bm-tab-active-border-color, var(--bm-tab-active-color, #3525cd));
      border-top-width: var(--bm-tab-active-border-top-width, 0px);
      border-right-width: var(--bm-tab-active-border-right-width, 0px);
      border-bottom-width: var(--bm-tab-active-border-bottom-width, 2px);
      border-left-width: var(--bm-tab-active-border-left-width, 0px);
    }
    .bm-tabs .bm-tabs__panel { display: none; }
    {{#tabs}}
    .bm-tabs:has(#{{tabsId}}-{{@index}}:checked) .bm-tabs__panel[data-bm-tab-panel="{{@index}}"] { display: block !important; }
    {{/tabs}}
  </style>
</section>
