.rp-sharebar {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%) translateY(140%);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
  
    display: flex;
    gap: 8px;
    align-items: center;
  
    padding: 10px 10px;
    border-radius: 999px;
    background: rgba(20, 20, 20, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  }
  
  .rp-sharebar.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 220ms ease, opacity 220ms ease;
  }
  
  .rp-sharebar__btn {
    border: 0;
    background: transparent;
    color: #fff;
    text-decoration: none;
    font: inherit;
    padding: 10px 12px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }
  
  .rp-sharebar__btn:hover { background: rgba(255,255,255,0.10); }
  
  .rp-sharebar__btn:focus {
    outline: 2px solid rgba(255,255,255,0.35);
    outline-offset: 2px;
  }
  
  .rp-sharebar__btn--primary { background: rgba(255,255,255,0.16); }
  
 

  [data-share-hero] {
    display: block;
    height: 1px;
    width: 100%;
  }


  .rp-sharebar{
    bottom: calc(14px + var(--rp-sticky-ad-offset, 0px));
  }     


  /* Mobile (default): bottom pill */
.rp-sharebar{
    position: fixed;
    left: 50%;
    right: auto;
    top: auto;
  
    bottom: calc(20px + var(--rp-sticky-ad-offset, 0px));
    transform: translateX(-50%) translateY(140%);
    opacity: 0;
    pointer-events: none;
  
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 10px;
    border-radius: 999px;
  }
  
  /* Visible state */
  .rp-sharebar.is-visible{
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 220ms ease, opacity 220ms ease;
  }
  
  /* Desktop: right-side rail */
  @media (min-width: 1024px) {
    .rp-sharebar{
        left: auto;
        right: 18px;
    
        top: 70vh;
        bottom: auto;
    
        transform: translateY(-50%) translateX(140%);
    
        flex-direction: column;
        gap: 10px;
    
        padding: 10px;
        border-radius: 999px;
      }
    
      .rp-sharebar.is-visible{
        transform: translateY(-50%) translateX(0);
      }
    
  
    /* Optional: make buttons more “icon-y” on desktop */
    .rp-sharebar__btn{
      padding: 10px 10px;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
    }
  }

  /* Make button content behave */
.rp-sharebar__btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
  }
  
  .rp-sharebar__txt{
    display: inline-block;
    max-width: 110px;           /* mobile safety */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Desktop: icon-only rail + tooltip */
  @media (min-width: 1024px) {
    .rp-sharebar__btn{
      width: 46px;
      height: 46px;
      padding: 0;
      justify-content: center;
      position: relative;
    }
  
    .rp-sharebar__txt{
      display: none; /* prevents overflow entirely */
    }
  
    /* Tooltip using data-label */
    .rp-sharebar__btn::after{
      content: attr(data-label);
      position: absolute;
      right: calc(100% + 10px);
      top: 50%;
      transform: translateY(-50%);
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(20,20,20,0.95);
      color: #fff;
      font-size: 13px;
      line-height: 1;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 140ms ease, transform 140ms ease;
    }
  
    .rp-sharebar__btn:hover::after,
    .rp-sharebar__btn:focus-visible::after{
      opacity: 1;
      transform: translateY(-50%) translateX(-2px);
    }
  }


  .rp-sharebar{
    background: rgba(15, 15, 15, 0.78);
    border: 1px solid rgba(255,255,255,0.10);
  }
  
  .rp-sharebar__btn{
    transition: background 140ms ease, transform 140ms ease;
  }
  
  .rp-sharebar__btn:hover{
    background: rgba(255,255,255,0.12);
  }
  
  .rp-sharebar__btn:active{
    transform: translateY(1px);
  }


  .rp-sharebar__btn[data-action="pin"]{
    background: rgba(255,255,255,0.10);
    color:#fff;
  }
  .rp-sharebar__btn[data-action="pin"]:hover{
    background: rgba(255,255,255,0.16);
    color:#fff;
  }

  @media (min-width: 1024px) {

    .rp-sharebar{
      background: rgba(247,246,243,0.95);
      
      border: 1px solid rgba(0,0,0,0.08);
  
      color: #333;
  
      box-shadow: 0 8px 22px rgba(0,0,0,0.12);
  
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  
    .rp-sharebar__btn{
      color: #444;
    }
  
    .rp-sharebar__btn:hover{
      background: rgba(0,0,0,0.06);
    }
  
    .rp-sharebar__btn--primary{
      background: rgba(0,0,0,0.05);
    }
  
    .rp-sharebar__btn--primary:hover{
      background: rgba(0,0,0,0.09);
    }
  
  }



  /* Hide Recipe Box button on mobile */
.rp-recipebox-btn{
    display:none;
  }
  
  /* Show on desktop rail */
  @media (min-width:1024px){
    .rp-recipebox-btn{
      display:inline-flex;
    }
  }

  /* Sharebar when injected into the Thesis left sidebar slot (desktop only) */
@media (min-width:1024px){
    .rp-sharebar.rp-sharebar--in-slot{
      position: static !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      bottom: auto !important;
      transform: none !important;
  
      /* Keep the nice light desktop styling */
      opacity: 1 !important;
      pointer-events: auto !important;
  
      /* Make it align to the right like the old buttons */
      margin-left: auto;
    }
  
    /* If you want it to be a neat vertical stack in the slot */
    .rp-sharebar.rp-sharebar--in-slot{
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: fit-content;
    }
  }