/* ==========================================================================
   JADRO STEEL — Contact dock (Call + WhatsApp), sitewide — v2 compact
   Mobile / tablet (< 992px): slim floating bar at the bottom.
   Desktop (>= 992px): two small tiles on the right edge.
   Icon on top, short text below. Markup unchanged (.jdock / .jdock-btn).
   ========================================================================== */

.jdock{
  --jd-call:#FF6600;
  --jd-call-dk:#E05500;
  --jd-wa:#1FA855;
  --jd-wa-dk:#168A45;
  position:fixed;
  z-index:950;              /* above page, below menu drawers (2200+) and lightbox */
  display:flex;
  font-family:'Montserrat',sans-serif;
}

.jdock .jdock-btn{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  color:#fff;text-decoration:none;text-align:center;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:background-color .18s ease,transform .12s ease,box-shadow .18s ease;
}
.jdock .jdock-call{background:linear-gradient(180deg,#ff7a1f,var(--jd-call))}
.jdock .jdock-wa{background:linear-gradient(180deg,#25b862,var(--jd-wa))}

.jdock .jdock-ic{
  display:flex;align-items:center;justify-content:center;
  height:20px;font-size:17px;line-height:1;color:#fff;
}
.jdock .jdock-wa .jdock-ic{font-size:20px}

.jdock .jdock-tx{
  display:block;
  font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.02em;
  white-space:nowrap;color:#fff;
}

/* pressed feel */
.jdock .jdock-btn:active{transform:scale(.96)}
.jdock .jdock-btn:focus-visible{outline:3px solid #111;outline-offset:2px}

/* the one attention cue: phone icon gives a short "ring" every few seconds */
@keyframes jdRing{
  0%,86%,100%{transform:rotate(0)}
  88%{transform:rotate(-16deg)}
  90%{transform:rotate(14deg)}
  92%{transform:rotate(-12deg)}
  94%{transform:rotate(10deg)}
  96%{transform:rotate(-4deg)}
}
.jdock .jdock-call .jdock-ic::before{display:inline-block;animation:jdRing 5s ease-in-out 2s infinite;transform-origin:50% 60%}

/* ---------- Mobile + tablet: two floating buttons, no background ---------- */
@media (max-width:991px){
  .jdock{
    left:10px;right:10px;
    bottom:calc(8px + env(safe-area-inset-bottom));
    gap:8px;
    padding:0;
    background:transparent;
    pointer-events:none;          /* the gap between buttons does not block taps on the page */
    animation:jdUp .45s cubic-bezier(.2,.8,.3,1) .6s both;
  }
  .jdock .jdock-btn{
    flex:1 1 50%;height:44px;border-radius:12px;
    pointer-events:auto;
    box-shadow:0 6px 16px rgba(0,0,0,.25);
  }
  .jdock .jdock-call:active{background:var(--jd-call-dk)}
  .jdock .jdock-wa:active{background:var(--jd-wa-dk)}

  /* keep the footer's last line visible above the buttons */
  body:has(.jdock){padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}
@keyframes jdUp{from{transform:translateY(120%);opacity:0}to{transform:none;opacity:1}}

/* ---------- Desktop: small tiles on the right ---------- */
@media (min-width:992px){
  .jdock{
    right:14px;top:50%;
    transform:translateY(-50%);
    flex-direction:column;
    gap:8px;
  }
  .jdock .jdock-btn{
    width:62px;height:62px;gap:4px;
    border-radius:14px;
    box-shadow:0 6px 18px rgba(0,0,0,.22);
  }
  .jdock .jdock-ic{height:22px;font-size:19px}
  .jdock .jdock-wa .jdock-ic{font-size:23px}
  .jdock .jdock-tx{font-size:9.5px}

  .jdock .jdock-btn:hover{transform:translateX(-4px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
  .jdock .jdock-call:hover{background:var(--jd-call-dk)}
  .jdock .jdock-wa:hover{background:var(--jd-wa-dk)}
  .jdock .jdock-btn:active{transform:translateX(-4px) scale(.96)}
}

@media (prefers-reduced-motion:reduce){
  .jdock,
  .jdock .jdock-btn,
  .jdock .jdock-call .jdock-ic::before{animation:none!important;transition:none}
}