/* =========================================================
   VITA UNIKA — BOTTOM CONTACT DOCK V29
   Main navigation = TOP
   Contact navigation = BOTTOM
   ========================================================= */

.sticky-contact-rail{
  position:fixed!important;

  top:auto!important;
  bottom:26px!important;

  left:50%!important;

  z-index:9997!important;

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

  gap:5px!important;

  width:auto!important;

  padding:6px!important;

  border-radius:999px!important;

  background:
    rgba(11,121,120,.88)!important;

  border:
    1px solid
    rgba(255,255,255,.30)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 16px 42px rgba(11,69,67,.18)!important;

  backdrop-filter:
    blur(18px)
    saturate(165%)!important;

  -webkit-backdrop-filter:
    blur(18px)
    saturate(165%)!important;

  opacity:0!important;

  pointer-events:none!important;

  transform:
    translate3d(-50%,24px,0)
    scale(.94)!important;

  transform-origin:
    bottom center!important;

  transition:
    opacity .48s ease,
    transform .72s cubic-bezier(.16,1,.3,1)!important;
}


/* وقتی Header به بالا چسبید */

.sticky-contact-rail.is-visible{
  opacity:1!important;

  pointer-events:auto!important;

  transform:
    translate3d(-50%,0,0)
    scale(1)!important;
}


/* =========================================================
   ICON BUTTONS
   ========================================================= */

.sticky-contact-rail a{
  position:relative!important;

  width:46px!important;
  height:46px!important;

  flex:0 0 46px!important;

  display:grid!important;
  place-items:center!important;

  padding:0!important;
  margin:0!important;

  border-radius:50%!important;

  color:#fff!important;

  text-decoration:none!important;

  background:
    rgba(255,255,255,.055)!important;

  border:
    1px solid
    rgba(255,255,255,.12)!important;

  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    background-color .45s ease,
    color .45s ease,
    border-color .45s ease!important;
}


.sticky-contact-rail svg{
  width:19px!important;
  height:19px!important;

  display:block!important;
}


/* separator */

.sticky-contact-rail a + a::before{
  content:"";

  position:absolute;

  left:-4px;
  top:12px;
  bottom:12px;

  width:1px;

  background:
    rgba(255,255,255,.13);
}


/* =========================================================
   GOLD DETAIL
   ========================================================= */

.sticky-contact-rail::before{
  content:"";

  position:absolute;

  left:50%;
  top:-4px;

  width:24px;
  height:2px;

  transform:
    translateX(-50%);

  border-radius:999px;

  background:#b48d42;

  opacity:.8;
}


/* =========================================================
   TOOLTIP
   چون Dock پایین صفحه است Tooltip باید برود بالا
   ========================================================= */

.sticky-contact-rail a::after{
  content:
    attr(data-label);

  position:absolute;

  left:50%;
  bottom:calc(100% + 11px);
  top:auto!important;

  transform:
    translate3d(-50%,5px,0);

  padding:
    7px 10px;

  border-radius:8px;

  white-space:nowrap;

  font-size:9px;
  line-height:1;

  font-weight:600;

  letter-spacing:.08em;

  color:#fff;

  background:
    rgba(19,39,37,.94);

  opacity:0;

  pointer-events:none;

  transition:
    opacity .3s ease,
    transform .4s cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   HOVER
   ========================================================= */

@media(hover:hover) and (pointer:fine){

  .sticky-contact-rail a:hover{
    color:#0b7978!important;

    background:#fff!important;

    border-color:
      rgba(255,255,255,.8)!important;

    transform:
      translateY(-3px)!important;
  }


  .sticky-contact-rail a:hover::after{
    opacity:1;

    transform:
      translate3d(-50%,0,0);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:760px){

  .sticky-contact-rail{
    bottom:
      max(
        16px,
        env(safe-area-inset-bottom)
      )!important;

    padding:5px!important;
    gap:3px!important;
  }


  .sticky-contact-rail a{
    width:44px!important;
    height:44px!important;

    flex-basis:44px!important;
  }


  .sticky-contact-rail a::after{
    display:none!important;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .sticky-contact-rail,
  .sticky-contact-rail a{
    transition:none!important;
  }

}