/* Fixed bottom full-width contact bar (Mobile + Tablet + Desktop) */
.contact-float{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  z-index:99999;

  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;              /* all buttons in one line */
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:10px 12px;
  background:rgba(255,255,255,.98);
  backdrop-filter:saturate(180%) blur(10px);
  box-shadow:0 -10px 25px rgba(0,0,0,.12);
  border-top:1px solid rgba(0,0,0,.08);
}

/* Buttons */
.contact-float .cf-btn{
  flex:1;                        /* equal width buttons */
  min-width:0;
  max-width:520px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:12px 10px;
  border-radius:14px;

  text-decoration:none;
  font-weight:700;
  line-height:1;
  white-space:nowrap;            /* keep icon+text in one line */

  border:2px solid rgba(0,0,0,.12);
  box-shadow:0 6px 14px rgba(0,0,0,.10);
}

.contact-float .cf-ic{font-size:18px}
.contact-float .cf-tx{font-size:14px}

/* Colors + borders (change anytime) */
.contact-float .cf-call{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.contact-float .cf-wa{background:#16a34a;color:#fff;border-color:#16a34a}
.contact-float .cf-tg{background:#0ea5e9;color:#fff;border-color:#0ea5e9}

/* Hover */
@media (hover:hover){
  .contact-float .cf-btn:hover{filter:brightness(.95)}
}

/* Tighter spacing on very small screens (still one line) */
@media (max-width:420px){
  .contact-float{gap:6px;padding:9px 8px}
  .contact-float .cf-btn{gap:6px;padding:12px 8px;border-radius:12px}
  .contact-float .cf-tx{font-size:13px}
}

/* Prevent bar from covering page content */
body{padding-bottom:92px}