/* ---------- TAB BAR MOBILE (SVG notch) ---------- */
:root{
  --ro-tabbar-h: 84px;      /* hauteur réelle (doit matcher le SVG viewBox height) */
  --ro-tabbar-fab: 56px;    /* diamètre bouton central */
}

/* cachée par défaut */
.ro-tabbar{ display:none; }

@media (max-width: 440px){

  /* ====== BAR ====== */
  .ro-tabbar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: var(--ro-tabbar-h);
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));

    background: transparent; /* le fond vient du SVG */
    transform: none !important; /* évite les transforms injectés par thème */

    /* au cas où un ancien style traîne */
    border-radius: 0 !important;
    box-shadow: none !important;

  }


  /* ====== SVG BACKGROUND ====== */
  .ro-tabbar__bg{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;
    pointer-events: none;
  }

  .ro-tabbar__fill{ 
    fill: var(--ro-dolphing-200); 
  
  }

  .ro-tabbar__stroke{
    fill: none;
    stroke: var(--ro-dolphing-300);
    stroke-width: 4;
    shape-rendering: geometricPrecision;

    
  }

  /* tout ce qui est “contenu” passe au-dessus du SVG */
  .ro-tabbar > *:not(.ro-tabbar__bg){
    position: relative;
    z-index: 1;
  }

  /* ====== PUSH CONTENT ABOVE TABBAR ====== */
  /* .ro-app__content{
    padding-bottom: calc(var(--ro-tabbar-h) + 18px + env(safe-area-inset-bottom));
  } */

  /* ====== ITEMS ====== */
  .ro-tabbar__item{
    width: 44px;
    height: 44px;

    border: 0;
    background: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;
    color: var(--ro-dolphing-700);
    text-decoration: none;
    cursor: pointer;

    transform: none !important; /* évite les surprises */
  }

  .ro-tabbar__item i, .ro-iconbtn i{
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
  }

  .ro-tabbar__item.is-active{
    background: var(--ro-dolphing-100);
  }

  /* ====== SPACER (réserve la place du FAB au centre) ====== */
  .ro-tabbar__spacer{
    width: var(--ro-tabbar-fab);
    flex: 0 0 var(--ro-tabbar-fab);
    height: 1px;
  }

  /* ====== FAB (FORCÉ AU CENTRE) ====== */
  .ro-tabbar__fab{
    position: absolute !important;
    left: 50% !important;
    top: -36px !important;

    /* reset total du transform (si un thème en ajoute) */
    transform: translate(-50%, 0) !important;

    width: var(--ro-tabbar-fab);
    height: var(--ro-tabbar-fab);
    border-radius: 999px;

    background: var(--ro-dolphing-700);
    color: var(--ro-dolphing-50);

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 20px rgba(0,0,0,.16);
    outline:0;

    z-index: 2;
    text-decoration: none;
  }

  /* ton SVG custom dans le FAB */
  .ro-tabbar__fab .ro-icon{
    width: 26px;
    height: 26px;
    display: block;
    color: currentColor;
  }

  /* ====== KILL OLD NOTCH RULES IF THEY EXIST ====== */
  .ro-tabbar::before,
  .ro-tabbar::after{
    content: none !important;
  }
}