/* ═══ button.css | Vocabolario Calitrano ═══ */

/* ════ BACK TO TOP ════ */
    .back-to-top {
      position:fixed;
      bottom:calc(1.8rem + var(--sab));
      right:calc(1.5rem + var(--sar));
      z-index:400;
      width:44px; height:44px;
      background:var(--rosso-deep);
      border:1px solid var(--oro);
      border-radius: var(--r-sm);
      color:var(--oro);
      display:flex; align-items:center; justify-content:center;
      cursor:pointer;
      opacity:0; transform:translateY(12px); pointer-events:none;
      transition:opacity .25s ease, transform .25s ease, background .2s ease;
      -webkit-tap-highlight-color:transparent;
    }
    .back-to-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
    .back-to-top:hover  { background:var(--rosso); }
    .back-to-top:active { background:var(--rosso-mid); }



    /* ── Freccia elegante nei pill toggle ── */
    .pill-arrow {
      flex-shrink: 0;
      opacity: .6;
      transition: opacity .2s, transform .2s;
    }

    .lang-pill.active .pill-arrow,
    .search-panel-pill.active .pill-arrow,
    .voc-dir-btn.active .pill-arrow {
      opacity: .9;
    }

    .pill-label {
      white-space: nowrap;
    }

    /* Assicura layout flex per i pill con freccia */
    .lang-pill,
    .search-panel-pill,
    .voc-dir-btn {
      display: flex !important;
      align-items: center;
      justify-content: center;
      gap: .4rem;
    }