/* Arborwise bottom bar v3.
   Loaded AFTER styles.css so these rules win.
   Kept in its own file on purpose: styles.css is ~45KB and full
   file rewrites through the connector have truncated it before.
   v3 changes: icon and label now sit side by side instead of
   stacked, which cuts bar height nearly in half and fixes the
   clipped labels. All three items are solid cream pills with
   forest green content so they actually read against the bar. */

@media (max-width:960px), (hover:none) and (pointer:coarse){
  .action-bar{
    position:fixed;
    left:0; right:0; bottom:0; top:auto;
    margin-left:0; padding-left:0;
    z-index:60;
    background:#17402B;
    border-top:1px solid rgba(247,244,236,.20);
    padding:7px 8px calc(8px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(0,0,0,.34);
  }
  .action-bar .container{max-width:none;padding:0;margin:0;display:block}
  .action-bar .msg{display:none}
  .action-bar .btns{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:7px;
    width:100%;
    margin:0;
    align-items:stretch;
  }
  .action-bar .btn,
  .action-bar .btn-text,
  .action-bar .btn-call,
  .action-bar .btn-est{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#F7F4EC;
    color:#17402B;
    border:0;
    border-radius:9px;
    box-shadow:0 2px 6px rgba(0,0,0,.26);
    font-family:'Barlow Condensed',Arial,sans-serif;
    font-weight:800;
    font-size:.82rem;
    letter-spacing:.03em;
    line-height:1;
    text-transform:uppercase;
    text-decoration:none;
    padding:0 6px;
    min-height:46px;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
  }
  .action-bar .btn + .btn{border-left:0}
  .action-bar .btn::before{
    content:"";
    display:block;
    flex:none;
    width:19px;
    height:19px;
    border-radius:0;
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    box-shadow:none;
  }
  /* Text Us, message bubble, forest green */
  .action-bar .btn-text::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317402B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.9 9.9 0 0 1-3.8-.8L3 21l1.9-4.6A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z'/%3E%3C/svg%3E");
  }
  /* Free Estimate, clipboard, forest green */
  .action-bar .btn-est::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317402B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6a1 1 0 0 1 1 1v1H8V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M16 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E");
  }
  /* Call Now, solid phone, forest green */
  .action-bar .btn-call::before{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2317402B'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
  }
  .action-bar .btn:active{background:#E8E2D4}
  body{padding-bottom:70px}
  .annie-perch{bottom:80px}
  .footer-bottom{padding-bottom:18px}
}

/* Narrow phones. FREE ESTIMATE is the long label. */
@media (max-width:379px){
  .action-bar .btns{gap:5px}
  .action-bar .btn,
  .action-bar .btn-text,
  .action-bar .btn-call,
  .action-bar .btn-est{
    font-size:.70rem;
    letter-spacing:.01em;
    gap:4px;
    padding:0 3px;
    min-height:44px;
  }
  .action-bar .btn::before{width:16px;height:16px}
  body{padding-bottom:66px}
  .annie-perch{bottom:76px}
}
/* ---- v4: hierarchy on the bottom bar ----
   All three pills were identical, so nothing
   read as the primary action. Call Now now
   carries the Arborwise amber, a little more
   width and a slightly larger label. The two
   cream pills gain a bottom edge so they stop
   reading as flat blocks. */

@media (max-width:960px), (hover:none) and (pointer:coarse){
  .action-bar .btns{
    grid-template-columns:1fr 1.18fr 1fr;
  }
  .action-bar .btn-text,
  .action-bar .btn-est{
    background:#F7F4EC;
    color:#17402B;
    box-shadow:inset 0 -2px 0 rgba(23,64,43,.16), 0 2px 6px rgba(0,0,0,.30);
  }
  .action-bar .btn-call{
    background:#F59F0A;
    color:#17402B;
    font-size:.88rem;
    box-shadow:inset 0 -2px 0 rgba(23,64,43,.22), 0 3px 10px rgba(0,0,0,.38);
  }
  .action-bar .btn-text:active,
  .action-bar .btn-est:active{background:#E8E2D4}
  .action-bar .btn-call:active{background:#E08D06}
}

@media (max-width:379px){
  .action-bar .btns{grid-template-columns:1fr 1.15fr 1fr}
  .action-bar .btn-call{font-size:.74rem}
}
/* ---- v5: fix the jump and the missed taps ----
   Not styling. Two real bugs.
   1. Chrome Android waits ~300ms after touchend
      to see if you are double tapping to zoom.
      During that wait the collapsing address bar
      moves this fixed bar, so the finger and the
      button end up in different places and the
      tap misses or hits a neighbour.
      touch-action:manipulation removes the wait.
   2. The bar was not on its own compositor layer,
      so it repainted during scroll and jumped.
   Targets go 46px to 50px, Google's own minimum
   for a reliable thumb tap. Body padding follows. */

@media (max-width:960px), (hover:none) and (pointer:coarse){
  .action-bar{
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    will-change:transform;
  }
  .action-bar .btn,
  .action-bar .btn-text,
  .action-bar .btn-call,
  .action-bar .btn-est{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;
    user-select:none;
    min-height:50px;
  }
  body{padding-bottom:74px}
  .annie-perch{bottom:84px}
}

@media (max-width:379px){
  .action-bar .btn,
  .action-bar .btn-text,
  .action-bar .btn-call,
  .action-bar .btn-est{min-height:48px}
  body{padding-bottom:70px}
  .annie-perch{bottom:80px}
}