/* H&R Automotive -- mobile quick-action bar (BUILD 59).
   Four thumb-reach buttons pinned to the bottom of the screen on phones and small
   tablets: Call / Book / WhatsApp / Is my car ready?  Modelled on the Reynoso bar
   (icon on top, short uppercase label under it) so a long label never has to fit on
   one line. Hidden on desktop, where the header nav and the floating chat pill do
   the same jobs. */
.mobile-action-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(9,9,11,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid #27272a; gap: 6px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.mobile-action-bar a, .mobile-action-bar button {
  flex: 1 1 0; min-width: 0; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  /* BUILD 208 (Eric, 2026-09-18): all four are the same shape. Call and Request
     an Estimate were already full pills from the house pill rule; Is my car
     ready? and WhatsApp were still 8px rectangles. */
  padding: 6px 2px 5px; border: 0; border-radius: 999px; color: #fff;
  font: 700 10px/1.1 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; text-align: center; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mobile-action-bar svg { width: 20px; height: 20px; flex-shrink: 0; }
.mobile-action-bar span { display: block; max-width: 100%; }
.mab-call { background: #125c2c; }   /* BUILD 100: darker green */
.mab-book { background: #e53935; }   /* BUILD 98: Request an Estimate, red */
.mab-wa   { background: #25D366; }
.mab-chat { background: #1e40af; color: #fff; }   /* BUILD 100: dark blue */
.mobile-action-bar a:active, .mobile-action-bar button:active { filter: brightness(1.12); }

@media (max-width: 900px) {
  .mobile-action-bar { display: flex; }
  /* Room under the footer so the bar never covers the last line of the page. */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* The bar's fourth button IS the chat launcher on phones. */
  .chat-cta { display: none; }
  /* Kiosk (iPad intake) hides header/footer/chat already; the bar goes with them. */
  body.kiosk .mobile-action-bar { display: none; }
  body.kiosk { padding-bottom: 0; }
}
/* Tablets between the two breakpoints: the chat panel is still a floating box, so lift it above the bar. */
@media (min-width: 761px) and (max-width: 900px) {
  .chat-panel { bottom: calc(74px + env(safe-area-inset-bottom)); }
}

/* BUILD 91 (Eric): the buttons sit a little higher, clear of the phone's bottom edge. */
@media (max-width: 900px) {
  .mobile-action-bar { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .chat-cta { bottom: calc(76px + 12px + env(safe-area-inset-bottom)); }
}