/* ============================================================
   KissMyMac — sticky action bar (mobile + tablet, <=1024px)
   WhatsApp branch picker · Book Appointment · Call
   Markup lives in Elementor footer template 17052 (editable).
   Light-only on purpose: the site has no dark theme.
   ============================================================ */
.kmm-ab{
  --ab-wa:#12703A; --ab-wa-h:#0E5C30; --ab-wa-tint:rgba(18,112,58,.09);
  --ab-blue:#2F6FE0; --ab-blue-h:#2456B8;
  --ab-call:#E94B45; --ab-call-h:#D33F39;
  --ab-ink:#1D1D1F; --ab-mut:#6E6E73; --ab-line:#E4E4E8; --ab-ground:#F5F5F7;
  --ab-ease:cubic-bezier(.16,1,.3,1);
  position:fixed; left:0; right:0; bottom:0; z-index:9990;
  display:none; gap:9px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--ab-line);
  font-family:-apple-system,system-ui,'SF Pro Display','Segoe UI',sans-serif;
}

/* mobile + tablet only */
@media (max-width:1024px){
  html.kmm-ab-on .kmm-ab{display:flex}
  html.kmm-ab-on body{padding-bottom:78px !important}
}
@media (min-width:1025px){
  .kmm-ab,.kmm-ab-sheet,.kmm-ab-back{display:none !important}
}

/* ---------- buttons ---------- */
.kmm-ab__btn{
  flex:1 1 0; min-width:0; min-height:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:0; border-radius:12px; cursor:pointer;
  font:600 15px/1.1 inherit; letter-spacing:-.01em; color:#fff;
  text-decoration:none; text-align:center; padding:11px 8px;
  transition:background .2s, transform .18s var(--ab-ease), box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.kmm-ab__btn:active{transform:translateY(1px) scale(.985)}
.kmm-ab__btn svg{flex:0 0 auto; width:18px; height:18px}
.kmm-ab__btn > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* WhatsApp carries icon + label + chevron, so it needs a wider share */
.kmm-ab__wa{background:var(--ab-wa); flex-grow:1.38}
.kmm-ab__wa:hover{background:var(--ab-wa-h)}
.kmm-ab__book{background:var(--ab-blue)}
.kmm-ab__book:hover{background:var(--ab-blue-h)}
.kmm-ab__call{background:var(--ab-call)}
.kmm-ab__call:hover{background:var(--ab-call-h)}
.kmm-ab__btn:focus-visible{outline:3px solid #0C0D11; outline-offset:2px}

.kmm-ab__chev{width:13px !important; height:13px !important; transition:transform .34s var(--ab-ease)}
.kmm-ab__wa[aria-expanded="true"]{background:var(--ab-wa-h); box-shadow:0 0 0 3px rgba(18,112,58,.22)}
.kmm-ab__wa[aria-expanded="true"] .kmm-ab__chev{transform:rotate(180deg)}

.kmm-ab__lbl-sm{display:none}
@media (max-width:400px){
  .kmm-ab__btn{font-size:14px; gap:6px}
  .kmm-ab__lbl-lg{display:none}
  .kmm-ab__lbl-sm{display:inline}
}

/* ---------- backdrop ---------- */
.kmm-ab-back{
  position:fixed; inset:0; z-index:9989;
  background:rgba(12,13,17,.44);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ab-ease,cubic-bezier(.16,1,.3,1)), visibility .3s;
}
.kmm-ab-back.is-open{opacity:1; visibility:visible}

/* ---------- branch sheet ---------- */
.kmm-ab-sheet{
  --ab-ease:cubic-bezier(.16,1,.3,1);
  position:fixed; left:0; right:0; z-index:9991;
  bottom:calc(80px + env(safe-area-inset-bottom,0px));
  margin:0 12px; padding:6px;
  background:#fff; border:1px solid #E4E4E8; border-radius:16px;
  box-shadow:0 2px 6px rgba(24,36,68,.06), 0 22px 48px -18px rgba(12,13,17,.34);
  opacity:0; visibility:hidden; transform:translateY(10px) scale(.985);
  transform-origin:22% bottom;
  transition:opacity .26s var(--ab-ease), transform .34s var(--ab-ease), visibility .34s;
  font-family:-apple-system,system-ui,'SF Pro Display','Segoe UI',sans-serif;
  max-height:72vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.kmm-ab-sheet.is-open{opacity:1; visibility:visible; transform:none}

/* tail pointing down at the WhatsApp button */
.kmm-ab-sheet::after{
  content:""; position:absolute; left:36px; bottom:-7px;
  width:13px; height:13px; background:#fff;
  border-right:1px solid #E4E4E8; border-bottom:1px solid #E4E4E8;
  transform:rotate(45deg); border-radius:0 0 3px 0;
}

.kmm-ab-sheet__h{
  display:block; padding:11px 12px 9px;
  font:600 13.5px/1.3 inherit; letter-spacing:-.008em; color:var(--ab-mut,#6E6E73);
}

/* rows share one hairline rhythm rather than three identical boxes */
.kmm-ab-sheet__row{
  position:relative; display:grid;
  grid-template-columns:40px minmax(0,1fr) 18px; gap:13px; align-items:center;
  padding:12px; min-height:60px; border-radius:12px;
  text-decoration:none; color:#1D1D1F;
  transition:background .2s var(--ab-ease), transform .18s var(--ab-ease);
}
.kmm-ab-sheet__row + .kmm-ab-sheet__row::before{
  content:""; position:absolute; top:0; left:65px; right:12px; height:1px; background:#EDEDF0;
}
.kmm-ab-sheet__row:hover{background:rgba(18,112,58,.06)}
.kmm-ab-sheet__row:hover::before,
.kmm-ab-sheet__row:hover + .kmm-ab-sheet__row::before{background:transparent}
.kmm-ab-sheet__row:active{transform:scale(.99)}
.kmm-ab-sheet__row:focus-visible{outline:3px solid #12703A; outline-offset:-2px}

/* monogram of whoever answers that line, not a third identical logo */
.kmm-ab-sheet__ic{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(18,112,58,.09); color:#0E5C30;
  font:700 15px/1 inherit; letter-spacing:.01em;
  border:1px solid rgba(18,112,58,.16);
}
.kmm-ab-sheet__t{display:block; font:700 15px/1.25 inherit; letter-spacing:-.014em}
.kmm-ab-sheet__s{display:block; font:400 13px/1.35 inherit; color:var(--ab-mut,#6E6E73); margin-top:2px}
.kmm-ab-sheet__go{width:18px; height:18px; color:#B9B9BE; transition:transform .2s var(--ab-ease), color .2s}
.kmm-ab-sheet__row:hover .kmm-ab-sheet__go{color:#12703A; transform:translateX(2px)}

/* rows arrive in sequence so the eye follows top to bottom */
.kmm-ab-sheet.is-open .kmm-ab-sheet__row{animation:kmm-ab-row .42s var(--ab-ease) backwards}
.kmm-ab-sheet.is-open .kmm-ab-sheet__row:nth-of-type(1){animation-delay:.04s}
.kmm-ab-sheet.is-open .kmm-ab-sheet__row:nth-of-type(2){animation-delay:.09s}
.kmm-ab-sheet.is-open .kmm-ab-sheet__row:nth-of-type(3){animation-delay:.14s}
.kmm-ab-sheet.is-open .kmm-ab-sheet__row:nth-of-type(4){animation-delay:.19s}
@keyframes kmm-ab-row{from{opacity:0; transform:translateY(7px)}to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  .kmm-ab__btn,.kmm-ab__chev,.kmm-ab-back,.kmm-ab-sheet,
  .kmm-ab-sheet__row,.kmm-ab-sheet__go{transition:none}
  .kmm-ab-sheet{transform:none}
  .kmm-ab-sheet.is-open .kmm-ab-sheet__row{animation:none}
}
